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




html5 semantics (11)

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

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

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

या

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

Answers

डब्ल्यू 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>

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

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


व्यवहार अंतर: लेबल और इनपुट के बीच की जगह पर क्लिक करना

यदि आप लेबल और इनपुट के बीच की जगह पर क्लिक करते हैं तो इनपुट केवल इनपुट को सक्रिय करता है यदि लेबल में इनपुट होता है।

यह समझ में आता है क्योंकि इस मामले में अंतरिक्ष लेबल का सिर्फ एक और चरित्र है।

<p>Inside:</p>

<label>
  <input type="checkbox" />
  |&lt;----- Label. Click between me and the checkbox.
</label>

<p>Outside:</p>

<input type="checkbox" id="check" />
<label for="check">|&lt;----- Label. Click between me and the checkbox.</label>

लेबल और बॉक्स के बीच क्लिक करने में सक्षम होने का मतलब है कि यह है:

  • क्लिक करना आसान है
  • कम स्पष्ट जहां चीजें शुरू होती हैं और समाप्त होती हैं

बूटस्ट्रैप चेकबॉक्स v3.3 उदाहरण अंदर इनपुट का उपयोग करते हैं: http://getbootstrap.com/css/#forms उनका पालन करने के लिए बुद्धिमान हो सकता है। लेकिन उन्होंने अपने दिमाग को v4.0 में बदल दिया https://getbootstrap.com/docs/4.0/components/forms/#checkboxes-and-radios इसलिए मुझे नहीं पता कि अब बुद्धिमान क्या है:

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

यूएक्स प्रश्न जो इस बिंदु पर विस्तार से चर्चा करता है: https://ux.stackexchange.com/questions/23552/should-the-space-between-the-checkbox-and-label-be-clickable


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

<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>

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


व्यक्तिगत रूप से मैं लेबल को बाहर रखना चाहता हूं, जैसे कि आपके दूसरे उदाहरण में। यही कारण है कि फॉर एट्रिब्यूट है। कारण यह है कि मैं अक्सर दिखने के लिए फॉर्म प्राप्त करने के लिए चौड़ाई की तरह लेबल पर शैलियों को लागू करूंगा (नीचे शॉर्ट डाउन):

<style>
label {
  width: 120px;
  margin-right: 10px;
}
</style>

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

इसे बनाता है इसलिए मैं अपने रूपों में टेबल और सभी जंक से बच सकता हूं।


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


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

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

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


मैं आमतौर पर पहले दो विकल्पों के साथ जाता हूं। मैंने एक परिदृश्य देखा है जब तीसरा विकल्प इस्तेमाल किया गया था, जब लेबल विकल्प और सीएसएस में एम्बेडेड रेडियो विकल्प कुछ ऐसा था

label input {
    vertical-align: bottom;
}

रेडियो के लिए उचित ऊर्ध्वाधर संरेखण सुनिश्चित करने के लिए।


डब्ल्यू 3 सिफारिशों के लिए http://www.w3.org/TR/html401/interact/forms.html#h-17.9 देखें।

वे कहते हैं कि यह किसी भी तरह से किया जा सकता है। वे स्पष्ट रूप से दो तरीकों का वर्णन करते हैं (तत्व की आईडी के साथ "के लिए" का उपयोग करके) और अंतर्निहित (लेबल में तत्व एम्बेड करना):

स्पष्ट:

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

अंतर्निहित:

एक लेबल को अन्य नियंत्रण के साथ अंतर्निहित रूप से जोड़ने के लिए, नियंत्रण तत्व LABEL तत्व की सामग्री के भीतर होना चाहिए। इस मामले में, 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>

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

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


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

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


फ़ील्ड के लिए गैर-मानक नाम और आईडी का उपयोग करें, इसलिए "नाम" के बजाय "name_" है। तब ब्राउज़र इसे नाम फ़ील्ड के रूप में नहीं देख पाएंगे। इसके बारे में सबसे अच्छा हिस्सा यह है कि आप इसे कुछ क्षेत्रों में कर सकते हैं लेकिन सभी फ़ील्ड नहीं कर सकते हैं और यह सभी को स्वत: पूर्ण कर देगा लेकिन सभी फ़ील्ड नहीं।







html html5 semantics