एचटीएमएल में डेटा-एंट्री फॉर्म लेआउट: टेबल या कोई टेबल नहीं?

Question

मैं निम्नलिखित की तरह एक डाटा एंट्री प्रपत्र बनाना चाहते हैं:

Name: [ Name textbox ] 
Age:  [ Age textbox ] 
label n: [ textbox n ] 

कहाँ लेबल छोड़ दिया पंक्ति, और बक्सें बाएँ संरेखित। मुझे पता है कि मैं इसे table तत्व में कर सकता हूं, लेकिन मुझे यह भी पता है कि "टेबल केवल टैब्यूलर डेटा के लिए होना चाहिए"। जबकि मैं उस कथन से सहमत/असहमत हूं - मैं जानना चाहता हूं कि मेरा वांछित लेआउट "टैब्यूलर डेटा" माना जा सकता है या नहीं, और जटिल परिणाम के दर्जनों लाइनों के बिना समान परिणामों का उत्पादन करने के लिए एक वैकल्पिक लेआउट क्या होगा। ब्राउज़र सीएसएस।

मैं फिलहाल वेब विकास नहीं करता हूं (जब मैं यूआई काम करता हूं तो कुछ समय के लिए कड़ाई से WinForms), इसलिए मुझे सराहना है कि वहां एक सुरुचिपूर्ण समाधान हो सकता है। संभावित रूप से बुलेट पॉइंट्स के साथ एक अनियंत्रित सूची को बंद करना और लेबल से थोड़ी दूर-> फ़ील्ड वाई स्थिति ऑफसेटिंग, शायद?

Answer 1

label तत्वों के साथ अनॉर्डर्ड सूचियां यहां जाने का तरीका होना चाहिए। मार्कअप मैं का प्रयोग करेंगे कुछ ऐसा दिखाई देगा:

<form id="person" method="post" action="process.php"> 
    <ul> 
     <li><label for="name">Name: </label><input id="name" name="name" type="text" /></li> 
     <li><label for="age">Age: </label><input id="age" name="age" type="text" /></li> 
     <li><label for="n">N: </label><input id="n" name="n" type="text" /></li> 
    </ul> 
</form> 

और यह सीएसएस अगर आप से पूछा चाहते हैं ऐसी ही कुछ पाने के लिए:

#person ul { 
    list-style: none; 
} 

#person li { 
    padding: 5px 10px; 
} 

#person li label { 
    float: left; 
    width: 50px; 
    margin-top: 3px; 
} 

#person li input[type="text"] { 
    border: 1px solid #999; 
    padding: 3px; 
    width: 180px; 
} 

देखें: http://jsfiddle.net/tZhUQ/1 है, जो कुछ और दिलचस्प उत्पाद आप कर सकते हैं शामिल प्रयत्न।

Answer 2

Webcredible have an example, जो आप ढूंढ रहे हैं उसे पाने के लिए बस text-align: right हटा दें।

Smashing Magazine और Design Shack कुछ उदाहरणों को एकत्रित किया है।