क्या मुझे लेबल तत्व के अंदर इनपुट तत्व डालने चाहिए?

605

वहाँ labelऔर inputHTML तत्वों के घोंसले से संबंधित एक सबसे अच्छा अभ्यास है ?

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

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

या

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

html semantics

— jpsimard-NYX
स्रोत

107

डालने की बड़ी पेशेवरों में से एक <input />के अंदर <label>है, कि तुम छोड़ सकते हैं है forऔर id: <label>My text <input /></label>अपने उदाहरण में। इतना अच्छा!

— ज़नार्कस

16

जबकि मैं मानता हूं कि inputशब्दार्थ के अंदर नहीं है label, मैंने आज देखा कि बूटस्ट्रैप के डेवलपर्स मुझसे असहमत हैं । कुछ तत्व, जैसे कि इनलाइन चेकबॉक्स, को अलग-अलग ढंग से स्टाइल किया inputजाता है जो कि अंदर या बाहर है।

— ब्लेज़मॉन्गर

6

BTW यह एक बहुत बुरा विचार था बनाने के लिए <label for="id">क्योंकि मेरे पास पृष्ठ पर कई रूप हैं और मैं जाल idमें गिरने के बिना कई विजेट के लिए विशेषता का उपयोग नहीं कर सकता unique id per page। विजेट तक पहुँचने का एकमात्र स्वीकार्य तरीका है form + widget_name।

— मैक्सजूम सेप

5

यदि आपके पेज पर समान फ़ील्ड नामों के साथ आपके कई अलग-अलग रूप हैं, तो @MaxZoom जो आपको अद्वितीय आईडी के साथ आने में परेशानी कर रहे हैं, आप अपने पेज के डिज़ाइन को थोड़ा, आईएमएचओ पर पुनर्विचार करना चाह सकते हैं; स्पष्ट रूप से मुझे आपकी स्थिति का पता नहीं है, लेकिन यह सिर्फ मेरे लिए बुरा है

— केन बेलोव्स

5

@kenbellows यह एक डिज़ाइनर / बिज़नेस है (मेरा नहीं) एक पेज पर दो सर्च फॉर्म डालने का विचार। उपयोगकर्ता का सबसे अच्छा अनुभव अभ्यास समय के साथ बदल सकता है लेकिन किसी भी दृश्य परिदृश्य को कवर करने के लिए HTML पर्याप्त लचीला होना चाहिए (IMHO)।

— मैक्सजूम

528

W3 से: लेबल खुद से पहले, संबंधित नियंत्रण के बाद या उसके आसपास स्थित हो सकता है।

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

स्निपेट का विस्तार करें

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

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

— superUntitled
स्रोत

14

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

— फनका

6

मुझे आश्चर्य है कि अगर <label for="inputbox"><input id="inputbox" type="text" /></label>उनके मानदंडों के अनुसार एक पास है।

— मैट

63

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

— एलेक्स

9

लिंक किए गए WCAG दस्तावेज़ में निम्न विकल्प शामिल है "नियंत्रण एक लेबल तत्व के भीतर समाहित है जिसमें लेबल पाठ शामिल है।" मुझे नहीं पता कि अगर @ टिप्पणी के बाद से वर्षों में जोड़ा गया था, लेकिन इनपुट-इन-लेबल परिदृश्य को अब वैध माना जाता है।

— एलेक्स वीट्जर

6

लेबल के अंदर इनपुट के साथ एक समस्या है, कम से कम क्रोम में, जब आप एक क्लिक ईवेंट हैंडलर को लेबल से जोड़ते हैं, तो लेबल को क्लिक करने पर हैंडलर दो बार निकाल दिया जाता है। आप इसे return false;हैंडलर के अंत में प्राप्त कर सकते हैं , लेकिन यदि आपके पास संभवतः अन्य हैंडलर हैं जिन्हें बाद में निष्पादित करने की आवश्यकता है, और प्रचार को रोकना कोई विकल्प नहीं है, तो यह एक मुद्दा बन जाता है।

— वायर्ड_इन

67

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

<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 को अधिक पठनीय बनाता है। और मुझे वास्तव में लगता है कि मेरा पहला उदाहरण CSS के साथ स्टाइल करना आसान है, क्योंकि CSS नेस्टेड तत्वों के साथ बहुत अच्छा काम करता है।

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

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

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

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

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

— Znarkus
स्रोत

3

लेबल के अंदर इनपुट को शामिल करना लेआउट के लिए HTML का उपयोग करने के समान है।

— एमिल

8

मुझे यह समाधान इस तरह के मामलों के लिए भी पसंद है: <label>Expires after <input name="exp" /> days</label>(इनपुट तत्व से पहले और बाद में लेबल है)

— फिलिप

मुझे लगता है कि अंतिम उदाहरण है - आईडी और आईडी विशेषताओं के अलावा - वास्तव में इनपुट के बगल में लेबल होने से कोई अलग नहीं है और दोनों एक में लिपटे हैं div, liया क्या नहीं है, यह है !?

— रेट्रोवर्टिगो

1

@retrovertigo - कार्यात्मक रूप से? नहीं, यह सिर्फ मार्कअप को कम करता है, और शब्दों के शब्दार्थ को कम करता है। हमें पता है कि इनपुट के firstnameलिए लेबल का पालन करना चाहिए firstname, लेकिन ब्राउज़र को घोषणा की आवश्यकता है। यह सब स्वाद की बात है और आपको लगता है कि आपके कोड में सबसे अच्छा (और डिबग करना सबसे आसान है)। मैं अब नेस्टेड का उपयोग करना पसंद करता हूं, हालांकि मुझे इसकी आदत डालने में थोड़ा समय लगा।

— Xhynk

3

@MPavlak - एक त्वरित नज़र और मुझे यह मार्गदर्शन w3.org से मिला। w3.org/WAI/tutorials/forms/labels । मैंने तब w3.org/TR/WCAG20-TECHS/H44.html चेक किया । तल पर (यह अस्पष्ट है) यह कहता है कि अनुरूपता का दावा करने के लिए, आपको परीक्षण मानदंडों को पारित करने की आवश्यकता है, और यह विशेष रूप से बताता है कि आपको विशेषता के लिए उपयोग करना चाहिए। हकीकत में जब मैंने आखिरी बार Apple वॉइसओवर (10% मार्केट शेयर स्क्रीन्रेडर्स डेस्कटॉप, 60% मार्केट शेयर स्क्रीन्रेडर्स मोबाइल) इम्प्लांट लेबल्स में काम नहीं किया था, तो यह एक और बड़ा कारक था। उम्मीद है की वो मदद करदे!

— जेम्स वेस्टगेट

39

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

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

— टेरी
स्रोत

8

इसके लिए आपको एक आईडी का उपयोग करने की आवश्यकता होती है, जो लेआउट को बहुत कठिन रूप से संरचित करता है :-(

— lethalman

39

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

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

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

<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/compenders/forms/#checkboxes-and-radios में अपने विचार बदल दिए, इसलिए मुझे नहीं पता कि अब क्या बुद्धिमान है:

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

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

— सिरो सेंटिल्ली 郝海东冠状郝海东郝海东郝海东郝海东
स्रोत

यह कोई विशेष अंतर नहीं है। टॉगल सभी आज्ञाकारी ब्राउज़रों में दोनों मामलों के लिए काम करता है।

— हेक्सालिस

@hexalys रिपोर्ट के लिए धन्यवाद। मैंने जवाब अपडेट कर दिया है। क्या आपका मतलब है कि आज्ञाकारी ब्राउज़रों को दोनों मामलों में टॉगल करना चाहिए या नहीं? यदि आप प्रासंगिक मानक मार्ग से लिंक कर सकते हैं जो भयानक होगा।

— सिरो सेंटिल्ली 郝海东冠状 i i 法轮功

1

हाँ। यद्यपि मैं यह नोटिस करने में विफल रहा कि आपका उदाहरण भ्रामक है क्योंकि आपका स्थान वास्तव में एक पाठ स्थान नहीं है । यह marginचेकबॉक्स का है। आपके उदाहरण पर फ़ायरफ़ॉक्स व्यवहार अजीब है और एक बग की तरह लगता है। ए labelमें क्लिक करने योग्य के रूप में इनलाइन सामग्री के आसपास रिक्त स्थान या पैडिंग होगी। लेकिन यह देखते हुए कि एक लेबल का सामग्री मॉडल इनलाइन / फ़ेसिंग सामग्री है इनपुट का मार्जिन तब तक क्लिक करने योग्य नहीं होना चाहिए, जब तक कि आपका लेबल ऐसा न हो जाए कि लेबल display: blockके अंदर blockसभी ब्राउज़रों में क्लिक करने योग्य हो जाए।

— हेक्सालिस

1

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

— माइकल क्रेब्स

2

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

— तुर्ग्स

17

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

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

इसे बनाता है ताकि मैं तालिकाओं से बच सकूं और वह सब मेरे रूपों में रद्दी हो जाए।

— तोते
स्रोत

3

क्या आपको <br />इनपुट को अलग करने के बजाय, सीएसएस के लिए प्रस्तुति नहीं छोड़नी चाहिए ?

— Znarkus

1

@Znarkus - हाँ, आम तौर पर मैं उन्हें इस तरह के स्वरूपण से निपटने के लिए ओएल / एलआई में लपेटता हूं, यह सिर्फ एक त्वरित शॉर्टहैंड उदाहरण था।

— तोते

1

@Prorots: यह शब्दार्थ से बहुत अधिक अर्थ नहीं रखता है। और अगर आपको उन्हें लपेटने की आवश्यकता है, तो उन्हें केवल लेबल के साथ क्यों न लपेटें?

— ज़्नार्कस

1

@Parrots उस तर्क के साथ मुझे लगता है कि एक पृष्ठ पर सब कुछ उल / ली के अंदर जाना चाहिए। और <label> <span>My text</span> <input /> </label>आपके पास सभी स्टाइलिंग विकल्प हैं जिनकी आपको (कभी) आवश्यकता है।

— ज़्नर्कस

1

"के लिए" का उपयोग करना आपको एक आईडी का उपयोग करने में सक्षम बनाता है, जो पदानुक्रमित लेआउट के लिए खराब है।

— २०:१३

15

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

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

स्पष्ट:

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

अंतर्निहित:

एक लेबल को अन्य नियंत्रण के साथ जोड़ने के लिए, नियंत्रण तत्व LABEL तत्व की सामग्री के भीतर होना चाहिए। इस स्थिति में, LABEL में केवल एक नियंत्रण तत्व हो सकता है।

— user470514
स्रोत

मुझे अभी पता चला है कि निहितार्थ IE में काम नहीं कर रहा है ...।

— कारिनलिनचिन

11

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

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

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

— nicholaides
स्रोत

बहुत कम लचीला? क्या आप विस्तार से समझा सकते हैं? जैसा कि अन्य लोगों ने उल्लेख किया है, आप केवल आंतरिक लेबल पाठ को एक स्पैन के साथ लपेट सकते हैं, जब तक कि वह ऐसा न हो जो इसे बहुत कम लचीला बनाता है?

— MPavlak

7

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

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

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

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

— हारून
स्रोत

4

यह "गोच" नहीं है। यह स्पष्ट रूप से कल्पना का हिस्सा है; लेबल में 1 नियंत्रण तक हो सकता है। आप यहाँ अंतर्निहित और स्पष्ट शैलियों को भी मिला रहे हैं - यदि आप नियंत्रण को लेबल के अंदर रखते हैं, तो आपको इसकी आवश्यकता नहीं है for... और यदि आप उपयोग करना चाहते हैं for, तो लेबल के अंदर नियंत्रण होने से बहुत अर्थ नहीं बनता है ।

— cHao

सच है, लेकिन ऐसा लगता है कि यह विनिर्देश अच्छी तरह से समझा नहीं गया है। हम Drupal 6 के रूपों API के साथ इस मुद्दे पर भागे, जिसने मार्कअप उत्पन्न किया जो कि ऊपर वर्णित के विपरीत परिदृश्य नहीं बनाता था। मेरे सहयोगी थे और मैंने एक-दो मिनट के लिए अपने सिर खुजलाए, इसलिए मैंने सोचा कि मैं भविष्य में संभावित भ्रम को दूर करने के लिए इस मुद्दे को हवा दूंगा।

— एरोन

लेबल-> इनपुट परिदृश्य में "के लिए" की कोई आवश्यकता नहीं है। प्रति इनपुट एक इनपुट और इसका नाम या आईडी पता न होने का लाभ है और आप अच्छी सीएसएस स्टाइलिंग कर सकते हैं ताकि चीजों को एनकैप्सुलेटेड रखने के साथ-साथ किसी अन्य तत्व जैसे कि क्लिक होने पर फोकस हो सके। ऐसा करने के स्वच्छ तरीके के उदाहरण के लिए zipstory.com/signup देखें।

— जेसन सेब्रिंग

धन्यवाद; इसने एक और संबंधित प्रश्न का उत्तर दिया, जिसका अर्थ है कि क्या यह एक लेबल के अंदर संभावित रूप से एक से अधिक इनपुट के लिए जाता है। (संदर्भ: कई रेडियो बटन विकल्प, एक पंक्ति, प्रत्येक रेडियो बटन प्रविष्टि जिसमें १, २, ३, या संभवत: टाइप टेक्स्ट के अधिक इनपुट होते हैं, उस पंक्ति के रेडियो बटन को चुनने के परिणाम पर क्लिक करने के इरादे से, यदि चयनित नहीं है, और उस लाइन पर इनपुट / इनपुट के संपादन की अनुमति देता है।) यह फॉर्म में गैर-इनपुट टेक्स्ट के लिए कई लेबल रखने के लिए खुला छोड़ देता है, लेकिन इसने मेरे सवाल का जवाब दिया कि क्या मैंने सोचा था कि यह ठीक था। (यह नहीं था।)

— क्रिस्टोफ हेवर्ड

6

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

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

— slashCoder
स्रोत

5

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

label input {
    vertical-align: bottom;
}

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

— विक्टर Ionescu
स्रोत

2

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

— बेनी न्युगबॉएर
स्रोत

2

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

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

— निकोलस ज़ोज़ोल
स्रोत

1

एक चीज़ जिस पर आपको विचार करने की ज़रूरत है, वह है जावास्क्रिप्ट के साथ चेकबॉक्स और रेडियो इनपुट की परस्पर क्रिया।

नीचे संरचना का उपयोग:

<label>
  <input onclick="controlCheckbox()" type="checkbox" checked="checkboxState" />
  <span>Label text</span>
</label>

जब उपयोगकर्ता "लेबल टेक्स्ट" कंट्रोलचेकबॉक्स () फ़ंक्शन पर क्लिक करता है तो एक बार निकाल दिया जाएगा।

लेकिन जब इनपुट टैग पर नियंत्रण किया जाता है तो नियंत्रणचेकबॉक्स () फ़ंक्शन को कुछ पुराने ब्राउज़रों में दो बार निकाल दिया जा सकता है। ऐसा इसलिए है क्योंकि इनपुट और लेबल टैग दोनों चेकबॉक्स से जुड़े ऑनक्लिक ईवेंट को ट्रिगर करते हैं।

फिर आपके चेकबॉक्स में कुछ कीड़े हो सकते हैं।

मैं इस मुद्दे पर हाल ही में IE11 में चला गया हूँ। मुझे यकीन नहीं है कि अगर आधुनिक ब्राउज़रों को इस संरचना से परेशानी है।

— मारिउज़
स्रोत

-1

inputअंदर रखने का प्राथमिक लाभ labelमनुष्यों के लिए दक्षता टाइप करना और कंप्यूटरों के लिए बाइट भंडारण है।

@Znarkus ने ओपी को अपनी टिप्पणी में कहा,

डालने की बड़ी पेशेवरों में से एक <input />के अंदर <label>है, कि तुम छोड़ सकते हैं है forऔर id: <label>My text <input /></label>अपने उदाहरण में। इतना अच्छा!

नोट: @Znarknus कोड में, एक और दक्षता को शामिल किया गया था जो स्पष्ट रूप से टिप्पणी में नहीं कहा गया है। type="text"भी छोड़ा जा सकता है और inputडिफ़ॉल्ट रूप से एक पाठ बॉक्स प्रदान करेगा।

कीस्ट्रोक्स और बाइट्स की तुलना में एक तरफ [1]।

31 कीस्ट्रोक्स, 31 बाइट्स

<label>My Text<input /></label>

58 कीस्ट्रोक्स, 58 बाइट्स

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

अन्यथा, स्निपेट नेत्रहीन समान होते हैं और वे समान स्तर की उपयोगकर्ता पहुंच प्रदान करते हैं। एक उपयोगकर्ता टेक्स्ट बॉक्स में कर्सर रखने के लिए लेबल पर क्लिक या टैप कर सकता है।

[१] विंडोज पर नोटपैड में बनाई गई टेक्स्ट फाइलें (.txt), विंडोज फाइल एक्सप्लोरर गुणों से बाइट्स

— ThisClark
स्रोत