html - क्या मुझे लेबल टैग के अंदर इनपुट टैग रखना चाहिए?




html5 semantics (8)

मैं बस सोच रहा था कि लेबल और इनपुट टैग से संबंधित सबसे अच्छा अभ्यास है या नहीं:

क्लासिक तरीका:

<label for="myinput">My Text</label>
<input type="text" id="myinput" />

या

<label for="myinput">My Text
   <input type="text" id="myinput" />
</label>

एक उल्लेखनीय 'गेटचा' यह निर्देश देता है कि आपको "लेबल" तत्व के अंदर एक स्पष्ट तत्व के अंदर कभी भी एक से अधिक इनपुट तत्व शामिल नहीं करना चाहिए, उदाहरण के लिए:

<label for="child-input-1">
  <input type="radio" id="child-input-1"/>
  <span> Associate the following text with the selected radio button: </span>
  <input type="text" id="child-input-2"/>
</label>

हालांकि यह फॉर्म फीचर्स के लिए मोहक हो सकता है जिसमें एक कस्टम टेक्स्ट वैल्यू रेडियो बटन या चेकबॉक्स के लिए द्वितीयक है, लेबल तत्व की क्लिक-फोकस कार्यक्षमता तत्काल उस तत्व पर फोकस करेगी जिसकी आईडी को 'इसके' विशेषता में स्पष्ट रूप से परिभाषित किया गया है , उपयोगकर्ता को मूल्य दर्ज करने के लिए निहित टेक्स्ट फ़ील्ड में क्लिक करना लगभग असंभव बना देता है।

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


जैसा कि ज्यादातर लोगों ने कहा है, दोनों तरीकों से वास्तव में काम करते हैं, लेकिन मुझे लगता है कि केवल पहले को ही चाहिए। Semantically सख्त होने के नाते, लेबल इनपुट "शामिल" नहीं है। मेरी राय में, मार्कअप संरचना में रोकथाम (अभिभावक / बच्चे) संबंध दृश्य आउटपुट में रोकथाम को प्रतिबिंबित करना चाहिए। यानी, मार्कअप में किसी अन्य के आस-पास एक तत्व ब्राउज़र में उस के चारों ओर खींचा जाना चाहिए। इसके अनुसार, लेबल इनपुट के भाई होना चाहिए, न कि यह माता-पिता है। तो विकल्प संख्या दो मनमाने ढंग से और भ्रमित है। जेन ऑफ पायथन पढ़ने वाले प्रत्येक व्यक्ति शायद इस बात से सहमत होगा (फ्लैट घोंसला से बेहतर है, स्पैस घने से बेहतर है, एक होना चाहिए - और अधिमानतः इसे करने का केवल एक ही तरीका ...)।

W3C और प्रमुख ब्राउज़र विक्रेताओं (जैसे "आप इसे सही तरीके से करना चाहते हैं" की बजाय, "जिस तरह से आप इसे करना पसंद करते हैं" की अनुमति देने के कारण) यह है कि वेब आज बहुत गड़बड़ कर रहा है और हमें डेवलपर्स को उलझन में निपटना है और इतना विविध विरासत कोड।


दोनों सही हैं, लेकिन लेबल के अंदर इनपुट डालने से सीएसएस के साथ स्टाइल करते समय इसे बहुत कम लचीला बनाता है।

सबसे पहले, एक <label> प्रतिबंधित है जिसमें तत्व शामिल हो सकते हैं । उदाहरण के लिए, यदि आप <input> <label> अंदर नहीं हैं, तो आप केवल <div> <input> और लेबल टेक्स्ट के बीच डाल सकते हैं।

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


मैं अपने <label> अंदर तत्वों को लपेटना पसंद करता हूं क्योंकि मुझे आईडी उत्पन्न करने की आवश्यकता नहीं है।

मैं जावास्क्रिप्ट डेवलपर हूं, और प्रतिक्रिया या कोणीय का उपयोग उन घटकों को उत्पन्न करने के लिए किया जाता है जिन्हें मेरे या दूसरों द्वारा पुन: उपयोग किया जा सकता है। पृष्ठ में किसी आईडी को डुप्लिकेट करना तब आसान होगा, जिससे अजीब व्यवहार हो जाएंगे।


मैं पसंद करता हूं

<label>
  Firstname
  <input name="firstname" />
</label>

<label>
  Lastname
  <input name="lastname" />
</label>

ऊपर

<label for="firstname">Firstname</label>
<input name="firstname" id="firstname" />

<label for="lastname">Lastname</label>
<input name="lastname" id="lastname" />

मुख्य रूप से क्योंकि यह HTML को और अधिक पठनीय बनाता है। और मुझे लगता है कि मेरा पहला उदाहरण सीएसएस के साथ शैली बनाना आसान है, क्योंकि सीएसएस नेस्टेड तत्वों के साथ बहुत अच्छी तरह से काम करता है।

लेकिन मुझे लगता है कि यह स्वाद का मामला है।

यदि आपको अधिक स्टाइल विकल्पों की आवश्यकता है, तो एक स्पैन टैग जोड़ें।

<label>
  <span>Firstname</span>
  <input name="firstname" />
</label>

<label>
  <span>Lastname</span>
  <input name="lastname" />
</label>

कोड अभी भी मेरी राय में बेहतर दिखता है।


यदि आप लेबल टैग में इनपुट टैग शामिल करते हैं, तो आपको 'for' विशेषता का उपयोग करने की आवश्यकता नहीं है।

उस ने कहा, मैं अपने लेबल में इनपुट टैग शामिल नहीं करना चाहता क्योंकि मुझे लगता है कि वे अलग हैं, इकाइयां नहीं हैं।


डब्ल्यू 3 से: लेबल को संबंधित नियंत्रण के बाद या उसके आस-पास पहले ही रखा जा सकता है।

<label for="lastname">Last Name</label>
<input type="text" id="lastname" />

या

<input type="text" id="lastname" />
<label for="lastname">Last Name</label>

या

<label>
   <input type="text" name="lastname" />
   Last Name
</label>

ध्यान दें कि तीसरी तकनीक का उपयोग तब नहीं किया जा सकता जब लेआउट के लिए एक टेबल का उपयोग किया जा रहा हो, एक सेल में लेबल और उसके संबंधित फॉर्म फ़ील्ड को किसी अन्य सेल में उपयोग किया जा सके।

कोई भी वैध है। मैं या तो पहले या दूसरे उदाहरण का उपयोग करना पसंद करता हूं, क्योंकि यह आपको अधिक स्टाइल नियंत्रण देता है।


WHATWG का जिक्र करते हुए ( एक फॉर्म का यूजर इंटरफेस लिखना ) इनपुट क्षेत्र को लेबल के अंदर रखना गलत नहीं है। यह आपको कोड सहेजता है क्योंकि label से विशेषता के for अब आवश्यकता नहीं है।






semantics