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


84

मैंने इसे jQuery में देखा है - यह क्या करता है?

<label for="name"> text </label>
<input type="text" name="name" value=""/>

15
आपने इसे jQuery में कहाँ देखा है?
VisioN

2
कुछ इनलाइन शैलियों के jquery में हो सकता है। Jquery के कई लोग HTML पेज में आवश्यकता को परिभाषित करने के लिए इसका उपयोग करते हैं
विवेक ड्रैगन

12
उपरोक्त पंक्ति अपने html jquery का हिस्सा नहीं है
बस

जवाबों:


26

<label>एक <input>तत्व के साथ जुड़ने के लिए , आपको <input>एक idविशेषता देने की आवश्यकता है । <label>फिर एक जरूरत forविशेषता जिसका valueइनपुट के रूप में ही है id:

<label for="username">Click me</label>
<input type="text" id="username">

forविशेषता एक संबद्ध करता है <label>एक साथ <input>तत्व; जो कुछ प्रमुख लाभ प्रदान करता है:
1. लेबल पाठ न केवल नेत्रहीन इसके संबंधित पाठ इनपुट के साथ जुड़ा हुआ है; यह प्रोग्रामेटिक रूप से भी इसके साथ जुड़ा हुआ है। इसका मतलब यह है कि, उदाहरण के लिए, एक स्क्रीन रीडर लेबल को पढ़ेगा जब उपयोगकर्ता फॉर्म इनपुट पर केंद्रित होगा, जिससे एक सहायक प्रौद्योगिकी उपयोगकर्ता के लिए यह समझना आसान हो जाएगा कि क्या डेटा दर्ज किया जाना चाहिए।
2. आप इनपुट पर ध्यान केंद्रित करने और सक्रिय करने के लिए संबंधित लेबल पर क्लिक कर सकते हैं , साथ ही इनपुट भी। यह बढ़ा हुआ हिट क्षेत्र टच-स्क्रीन डिवाइस का उपयोग करने वालों सहित इनपुट को सक्रिय करने का प्रयास करने वाले किसी भी व्यक्ति को एक लाभ प्रदान करता है।

वैकल्पिक रूप से , आप घोंसला कर सकते हैं <input>सीधे अंदर <label>, जिस स्थिति में forऔर idविशेषताओं की आवश्यकता नहीं है क्योंकि संघ निहित है:

<label>Click me <input type="text"></label>

नोट:
एक inputको कई लेबल के साथ जोड़ा जा सकता है।
जब किसी <label>पर क्लिक किया जाता है या टैप किया जाता है और यह प्रपत्र नियंत्रण से संबद्ध होता है, तो परिणामी क्लिक घटना को संबंधित नियंत्रण के लिए भी उठाया जाता है।

पहुँच की चिंता

एक लेबल के अंदर एंकर या बटन जैसे इंटरैक्टिव तत्वों को न रखें। ऐसा करने से, लेबल से जुड़े फ़ॉर्म इनपुट को सक्रिय करना लोगों के लिए मुश्किल हो जाता है।

हेडिंग

<label>कई प्रकार की सहायक प्रौद्योगिकी के साथ हस्तक्षेप करने वाले तत्वों को रखने से , क्योंकि हेडिंग को आमतौर पर नेविगेशन सहायता के रूप में उपयोग किया जाता है। यदि लेबल के पाठ को नेत्रहीन समायोजित करने की आवश्यकता है, तो <label>इसके बजाय तत्व पर लागू सीएसएस वर्गों का उपयोग करें ।
यदि किसी प्रपत्र, या प्रपत्र के किसी अनुभाग को शीर्षक की आवश्यकता है, तो <legend>ए के भीतर रखे गए तत्व का उपयोग करें <fieldset>

बटन

एक घोषणा के <input>साथ एक तत्व type="button"और एक मान्य मूल्य विशेषता को इसके साथ जुड़े लेबल की आवश्यकता नहीं है। ऐसा करने से वास्तव में हस्तक्षेप हो सकता है कि सहायक तकनीक बटन इनपुट को कैसे पार्स करती है। <button>तत्व के लिए भी यही बात लागू होती है ।

रेफरी: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label


135

forविशेषता लेबल में प्रयोग किया जाता है। यह उस तत्व की आईडी को संदर्भित करता है जिससे यह लेबल जुड़ा हुआ है।

उदाहरण के लिए:

<label for="username">Username</label>
<input type="text" id="username" name="username" />

अब जब उपयोगकर्ता usernameपाठ पर माउस के साथ क्लिक करता है तो ब्राउज़र स्वचालित रूप से संबंधित inputक्षेत्र में ध्यान केंद्रित करेगा । यह अन्य इनपुट तत्वों जैसे कि <textbox>और के साथ भी काम करता है <select>

विनिर्देशन से उद्धरण :

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

जहाँ तक आपके प्रश्न को jQuery के साथ टैग क्यों किया गया है और आपने इसे jQuery में कहां उपयोग किया है, इसका उत्तर मैं नहीं दे सकता क्योंकि आपने अधिक जानकारी प्रदान नहीं की।

शायद लेबल इनपुट दिए गए संबंधित इनपुट तत्व को खोजने के लिए इसका उपयोग jQuery चयनकर्ता में किया गया था:

var label = $('label');
label.each(function() {
    // get the corresponding input element of the label:
    var input = $('#' + $(this).attr('for'));
});

7
बस एक साइड नोट। इसका उपयोग नए <output>तत्व के लिए भी किया जाता है । एमडीएन संदर्भ
क्रिस्टोफर एलियासन

13

मुझे इसका उत्तर देने की आवश्यकता महसूस हो रही है। मुझे वही भ्रम था।

<p>Click on one of the text labels to toggle the related control:</p>

<form action="/action_page.php">
  <label for="female">Male</label>
  <input type="radio" name="gender" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="gender" id="female" value="female"><br>
  <label for="other">Other</label>
  <input type="radio" name="gender" id="other" value="other"><br><br>
  <input type="submit" value="Submit">
</form>

मैंने महिला के लिए 'पुरुष' लेबल पर विशेषता के लिए परिवर्तन किया। अब, यदि आप 'पुरुष' पर क्लिक करते हैं तो 'महिला' रेडियो चेक हो जाएगा।

इतना ही आसान।


5

एक तेज उदाहरण:

<label for="name">Name:</label>
<input id="name" type="text" />

for=""टैग जब आप के रूप में अच्छी लेबल क्लिक करें इनपुट ध्यान देते हैं।


5

आप इसे लेबल के साथ यह कहने के लिए उपयोग करते हैं कि दो वस्तुएँ एक साथ हैं।

<input type="checkbox" name="remember" id="rememberbox"/>
<label for="rememberbox">Remember your details?</label>

इसका मतलब यह भी है कि उस लेबल पर क्लिक करने से चेकबॉक्स का मान बदल जाएगा।


3

इसका उपयोग <label>तत्व के लिए किया जाता है

यह लेबल क्लिक पर चयन करने के लिए इनपुट प्रकार चेकबॉक्स या रेडियो के साथ प्रयोग किया जाता है

काम कर रहे डेमो


3

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


3

FYI करें - यदि आप उदाहरण के साथ टाइपस्क्रिप्ट वातावरण में हैं

<label for={this.props.inputId}>{this.props.label}</label>

आपको htmlFor का उपयोग करने की आवश्यकता है

<label htmlFor={this.props.inputId}>{this.props.label}</label>

1

इसका उपयोग <label>html के लिए टेक्स्ट में किया जाता है

जैसे।

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

1
आपने इस सवाल का जवाब नहीं दिया, ओपी ने पूछा कि यह कैसे उपयोग होता है?
साइबर 8200

1

यह एक इनपुट तत्व के साथ लेबल को जोड़ता है। HTML टैग विभिन्न श्रेणियों के उपयोगकर्ताओं को विशेष अर्थ देने के लिए हैं। यहाँ लेबल किसके लिए है:

  1. मोटर विकलांगता वाले लोगों के लिए (सामान्य माउस उपयोगकर्ताओं के लिए भी) : संबंधित प्रपत्र नियंत्रण तक पहुंचने के लिए सही तरीके से उपयोग किए गए लेबल टैग पर क्लिक किया जा सकता है। उदाहरण के लिए। चेकबॉक्स पर विशेष रूप से क्लिक करने के बजाय, उपयोगकर्ता अधिक आसानी से क्लिक करने योग्य लेबल पर क्लिक कर सकता है और चेकबॉक्स को टॉगल कर सकता है।
  2. दृष्टिबाधित उपयोगकर्ताओं के लिए : दृष्टिबाधित उपयोगकर्ता स्क्रीन-रीडर्स का उपयोग करते हैं जो संबंधित लेबल टैग को पढ़ता है जब भी कोई प्रपत्र नियंत्रण केंद्रित होता है। यह उपयोगकर्ताओं को उस लेबल को जानने में मदद करता है जो अन्यथा उनके लिए अदृश्य था।

लेबलिंग के बारे में अधिक जानकारी -> https://www.w3.org/TR/WCAG20-TECHS/H44.html


हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.