HTML <लेबल> टैग में "के लिए" विशेषता क्या करती है?

382

मुझे आश्चर्य है कि निम्नलिखित दो कोड स्निपेट के बीच क्या अंतर है:

<label>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

तथा

<label for='theinput'>Input here : </label>
<input type='text' name='theinput' id='theinput'/>

मुझे यकीन है कि जब आप एक विशेष जावास्क्रिप्ट पुस्तकालय का उपयोग करते हैं तो यह कुछ करता है, लेकिन इसके अलावा, क्या यह HTML को मान्य करता है या किसी अन्य कारण से आवश्यक है?

— जेफ
स्रोत

577

<label>टैग आप लेबल पर क्लिक करने के लिए अनुमति देता है, और यह संबंधित इनपुट तत्व पर क्लिक की तरह व्यवहार किया जाएगा। इस एसोसिएशन को बनाने के दो तरीके हैं:

एक तरीका इनपुट तत्व के चारों ओर लेबल तत्व को लपेटना है:

<label>Input here:
    <input type='text' name='theinput' id='theinput'>
</label>

दूसरा तरीका forविशेषता का उपयोग करना है, यह संबंधित इनपुट की आईडी देता है:

<label for="theinput">Input here:</label>
<input type='text' name='whatever' id='theinput'>

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

एमडीएन में इस तत्व के बारे में और पढ़ें ।

— Barmar
स्रोत

106

ध्यान दें कि विशेषता के लिए आईडी विशेषता द्वारा इनपुट के लिए बाध्य है, और नाम विशेषता से मेल नहीं खाता है। <लेबल के लिए = "theinput"> यहां इनपुट करें: </ लेबल> <इनपुट प्रकार = 'टेक्स्ट' नाम = 'नोटमेकिंग' आईडी = 'theinput'> अभी भी काम करेगा

— Glo

4

लेबल पर एक क्लिक हमेशा संबंधित तत्व पर क्लिक करने की तरह व्यवहार नहीं किया जाता है। उदाहरण के लिए, क्रोम और सफारी में, एक लेबल पर क्लिक करना जो selectकेवल एक से जुड़ा हुआ है , विकल्पों के विस्तार के बजाय चयन पर ध्यान केंद्रित करता है।

— 13

2

@EmilePels जहाँ तक ब्राउज़र के ईवेंट मॉडल का संबंध है, वे समतुल्य हैं। आप जो वर्णन कर रहे हैं वह OS के ड्रॉप-डाउन मेनू द्वारा दिए गए UI के बारे में अधिक है, जो माउस से ही जुड़ा हुआ है।

— बमर 15

3

यह उल्लेख करना महत्वपूर्ण लगता है कि यह एक्सेसिबिलिटी और स्क्रीन रीडर के लिए बहुत प्रासंगिक है, इसका सक्रिय रूप से उपयोग क्यों करें।

— coyotte508

1

मैं पिछले दो घंटों से संघर्ष कर रहा था कि हर बार दो बार उठाए गए शरीर के क्लिक से मैं एक इनपुट फ़ील्ड के लिए "फॉर" विशेषता के साथ एक रूप में एक लेबल पर क्लिक करता हूं। मैं अंत में समझता हूं कि भले ही मैं लेबल के क्लिक पर stopPropagation का उपयोग करता हूं कि शरीर का क्लिक अभी भी क्यों उठाया गया था ... आपके द्वारा वर्णित व्यवहार के बाद इनपुट फ़ील्ड द्वारा उठाए गए क्लिक के कारण।

— शमूएल

52

forविशेषता के रूप में के विवरण में परिभाषित, एक नियंत्रण तत्व के साथ लेबल एकत्रित करती है labelएचटीएमएल 4.01 कल्पना में। इसका तात्पर्य, अन्य बातों के अलावा, कि जब labelतत्व फोकस प्राप्त करता है (जैसे कि क्लिक किया जा रहा है), तो यह फोकस को उसके संबद्ध नियंत्रण से गुजरता है। एक लेबल और एक नियंत्रण के बीच संबंध का उपयोग भाषण-आधारित उपयोगकर्ता एजेंटों द्वारा भी किया जा सकता है, जो उपयोगकर्ता को यह पूछने का एक तरीका दे सकता है कि संबंधित लेबल क्या है, जब एक नियंत्रण के साथ काम किया जाता है। (एसोसिएशन दृश्य प्रतिपादन के रूप में स्पष्ट नहीं हो सकता है।)

प्रश्न के पहले उदाहरण में (बिना for), labelमार्कअप के उपयोग का कोई तार्किक या कार्यात्मक निहितार्थ नहीं है - यह बेकार है, जब तक कि आप सीएसएस या जावास्क्रिप्ट में इसके साथ कुछ नहीं करते।

HTML विनिर्देशन नियंत्रण के साथ लेबल को जोड़ना अनिवार्य नहीं करते हैं, लेकिन वेब सामग्री एक्सेसिबिलिटी दिशानिर्देश (WCAG) 2.0 करते हैं। इसे तकनीकी दस्तावेज H44 में वर्णित किया गया है : पाठ तत्वों को प्रपत्र नियंत्रण के साथ जोड़ने के लिए लेबल तत्वों का उपयोग करना , जो यह भी बताता है कि अंतर्निहित संघ ( inputअंदर से घोंसले से label) व्यापक रूप से स्पष्ट एसोसिएशन के माध्यम से forऔर idविशेषताओं के रूप में समर्थित नहीं है ,

— जुक्का के। कोर्पेला
स्रोत

10

+1 शब्दार्थ संबंध के बारे में बात करने के लिए और कार्यात्मक क्लिक संबंध से परे इसका क्या अर्थ है।

— 19

नमस्ते, मेरे पास एक ही आईडी के साथ दो तत्व हैं, लेकिन अलग-अलग div में, मैंने लेबल के उपयोग से फ़ोकस इवेंट जोड़ा, लेकिन दूसरे तत्व में यह पहले तत्व पर ध्यान केंद्रित कर रहा है। <html> <body> <div id = "first_div"> <लेबल for = "नाम"> नाम </ लेबल> <इनपुट प्रकार = "पाठ" आईडी = "नाम"> </ div> <div id = "second_div "> <लेबल के लिए =" नाम "> नाम </ लेबल> <इनपुट प्रकार =" पाठ "आईडी =" नाम "> </ div> </ शरीर> </ html>

— LoveToCode

14

संक्षेप में, यह idइनपुट के संदर्भ में क्या करता है , बस इतना ही है:

<label for="the-id-of-the-input">Input here:</label>
<input type="text" name="the-name-of-input" id="the-id-of-the-input">

— उवे कीम
स्रोत

6

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

— बीन 5

3

की विशेषता के लिए <label>टैग उन्हें एक साथ बाध्य करने के लिए संबंधित तत्व की आईडी गुण के बराबर होना चाहिए।

— राहुल त्रिपाठी
स्रोत

7

हां, लेकिन "उन्हें एक साथ बांधने" से आपका क्या मतलब है? वे HTML संरचना में पहले से ही पड़ोसी हैं। यह वही है जो मुझे समझ में नहीं आता है।

— जेफ

1

निर्दिष्ट करता है कि किस तत्व में एक लेबल है

— राहुल त्रिपाठी

2

@CengizFrostclaw jsfiddle.net/DmSGh --- दोनों "इनपुट यहाँ" ग्रंथों पर क्लिक करके देखें कि क्या होता है।

— JJJ

1

@CengizFrostclaw: - एक लेबल विशेषता "के लिए" का उपयोग करके या तो एक तत्व के लिए बाध्य किया जा सकता है

— राहुल त्रिपाठी

1

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

— एलेक्स

0

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

    <li>
<label>{translate:blindcopy}</label>
            <a class="" href="#" title="{translate:savetemplate}" onclick="" ><i class="fa fa-list" class="button" ></i></a> &nbsp 
            <input type="text" id="BlindCopy" name="BlindCopy" class="splitblindcopy" />
    </li>

— शांति
स्रोत

0

यह forविशेषता के लिए जो भी इनपुट है वह लेबल करता है।

<input id='myInput' type='radio'>
<label for='myInput'>My 1st Radio Label</label>
<br>
<input id='input2' type='radio'>
<label for='input2'>My 2nd Radio Label</label>
<br>
<input id='input3' type='radio'>
<label for='input3'>My 3rd Radio Label</label>

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

— pythag0ras_
स्रोत