एचटीएमएल - एक लेबल

Question

मैं आदेश रेल आवेदनों पर HTML रूपों उत्पन्न करने के लिए formtastic उपयोग कर रहे हैं के साथ एक चेकबॉक्स कोडिंग का सही तरीका है। मेरा सवाल, हालांकि, वास्तव में एचटीएमएल से संबंधित है।

आज मुझे फॉर्मेटास्टिक जेनरेट चेकबॉक्स के रूप में एक अजीब व्यवहार मिला (फॉर्मटाइपटास्टिक लिंगो पर फ़ील्ड)।

क्षेत्रों (गैर चेक बॉक्स) के बाकी इस तरह से उत्पन्न कर रहे हैं:

<li> 
    <label for="my_textbox_field">My TextBox</label> 
    <input id="my_textbox_field" type="text" ... > 
</li> 

स, हालांकि, उनके <label> टैग के अंदर पूर्ण रूप से बंद कर रहे हैं - इस तरह:

<li> 
    <label for="my_boolean_field"> 
    <input id="my_boolean_field" type="checkbox" ... > 
    This is my boolean field 
    </label> 
</li> 

Formtastic दर्शन लगता है कि Learning to Love Forms प्रस्तुति पर आधारित है। असल में, उस प्रस्तुति के स्लाइड 36 पर इस संरचना को चेकबॉक्स के लिए सुझाव दिया गया है। मुझे प्रेजेंटेशन में लगता है कि प्रस्तुतकर्ता ने समझाया कि यह क्यों किया गया था, लेकिन यह स्लाइड पर लिखा नहीं गया है।

क्या कोई मुझे बता सकता है कि उनके <label> टैग के अंदर चेकबॉक्स को क्यों संलग्न करना एक अच्छा विचार हो सकता है, जैसे उन्हें टेक्स्टबॉक्स के साथ बाहर रखने के विपरीत?

Answer 1

एक पाठ इनपुट के लिए आम यूआई या तो छोड़ दिया पर कोई लेबल है

Email address: 
[___________________________________] 

एक चेकबॉक्स तथापि के लिए, आम यूआई के लिए है लेबल के बाद प्रकट करने के लिए इनपुट, इस तरह:

[x] Accept terms and conditions 

पहले दो मामलों के लिए, यह काफी सीएसएस आप बनाना है, तो लेबल मार्कअप में इनपुट से पहले आता है सरल करता है। यह तर्क हो सकता है कि लेबल इनपुट के आसपास अभी भी लपेट सकता है, लेकिन यहां महत्वपूर्ण बात यह पाठ इनपुट से पहले आता है।

तीसरे उदाहरण (चेकबॉक्स) में, पाठ लेबल के बाद आता है, और फिर, सीएसएस को मार्कअप ऑर्डर (इनपुट के बाद) में सही स्थान पर डालकर बहुत सरल बनाया जाता है।

तो, चेकबॉक्स हमेशा बाकी इनपुट के लिए अलग होने जा रहे थे।लेबल के साथ चेकबॉक्स की रैपिंग के संबंध में, यह केवल एक व्यक्तिगत प्राथमिकता थी, हालांकि मैं तर्क दूंगा कि चेकबॉक्स इनपुट अलग हैं, इसलिए लेबल के अंदर इनपुट होने से इन इनपुट को स्टाइल के लिए लक्षित करना आसान हो जाता है सीएसएस, क्योंकि मार्कअप अलग है।

Answer 2

किसी को भी मुझे बता सकते हैं क्यों उनके <label> टैग के अंदर चेक बॉक्स संलग्न एक अच्छा विचार हो सकता

यह एक अच्छा विचार हो सकता है क्योंकि आप इस मामले में id और for गुण खो सकता है, जिससे मार्कअप आसान है। जब एक <input> एक <label> अंदर है, उन दोनों के बीच संबंध निहित है। (HTML4 खंड 17.9.1 देखें।)

हालाँकि, व्यवहार में यह IE में काम नहीं करता है, तो आपको लगता है कि संभावित लाभ खो देते हैं।

मैं केवल इस मामले में यह लेआउट/स्टाइल कारणों के लिए है में ग्रहण कर सकते हैं।

Email address: [____________________] 

या इनपुट ऊपर लेबल:

Answer 3

अन्य उत्तरों में उल्लिखित कारणों के अतिरिक्त, यदि <label> और <input> अलग हैं तो उनके बीच कोई भी सफेद जगह गैर-क्लिक करने योग्य होगी। यह शायद वह नहीं है जो आप चाहते थे। उदाहरण के लिए, इस कोड में न्यू लाइन एक गैर क्लिक करने योग्य अंतराल में परिणाम होगा:

<input id="my_boolean_field" type="checkbox" ... >  
<label for="my_boolean_field">This is my boolean field</label> 

<input><label> अंदर घोंसले के शिकार इस से बचा जाता है, क्योंकि खाली स्थान के लेबल का हिस्सा है।

लाइव उदाहरण: http://jsfiddle.net/xKLrS/2/