HTML <label> टैग

  • पिछला पृष्ठ <kbd>
  • अगला पृष्ठ <legend>

परिभाषा और उपयोग

<label> लेबल इनपुट एलिमेंट को लेबल (टैग) को परिभाषित करता है。

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

<label> लेबल का for अटिबात यह एक सम्बन्धित एलिमेंट के id अटिबात के समान होना चाहिए。

<label> लेबल कई एलिमेंटों के लिए लेबल (टैग) को परिभाषित कर सकता है:

उपरोक्त एलिमेंट और लेबल के सही तरीके से उपयोग करने से निम्नलिखित उपयोगकर्ताओं के लिए लाभ होगा:

  • स्क्रीन रीडिंग यूजर (जब उपयोगकर्ता एलिमेंट पर केंद्रित होता है, तो टैग पढ़ता है)
  • बहुत छोटे क्षेत्र (उदाहरण के लिए चेकबॉक्स) को टिकट करने में कठिनाई रहने वाले उपयोगकर्ता - क्योंकि जब उपयोगकर्ता अपने क्लिक करें <label> एलीमेंट में टेक्स्ट के बदले पर इनपुट को टॉगल करता है (यह टिकट क्षेत्र को बढ़ाता है)

और देखें:

HTML DOM संदर्भ दस्तावेज:लेबल ऑब्जैक्ट

उदाहरण

तीन लेबल वाले रेडियो बटन:

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="सबमिट">
</form>

आप खुद सामने पर प्रयोग करें

सूचना और टिप्पणी

सूचना:<label> फील्ड के for गुण को संबंधित एलीमेंट के id गुण के समान होना चाहिए ताकि उन्हें बांधा जा सके। इसके बजाय, एलीमेंट को भी रखा जा सकता है <label> एलीमेंट के अंदर टैग को एलीमेंट के साथ बांधा जाता है

गुण

गुण मूल्य वर्णन
for एलीमेंट id label को कौन से फॉर्म एलीमेंट के साथ बांधा जाना है
form फॉर्म id label फील्ड को कौन से फॉर्म के साथ संबंधित है इसे निर्धारित करता है

वैश्विक प्रतियोगिता

<label> टैग निम्नलिखित को भी सहायता देता है HTML में वैश्विक प्रतियोगिता。

इवेंट प्रतियोगिता

<label> टैग निम्नलिखित को भी सहायता देता है HTML में इवेंट प्रतियोगिता。

डिफ़ॉल्ट की CSS सेटिंग

अधिकांश ब्राउज़र निम्नलिखित डिफ़ॉल्ट मूल्यों को प्रदर्शित करेंगे <label> एलीमेंट:

label {
  cursor: default;
}

आप खुद सामने पर प्रयोग करें

ब्राउज़र सहायता

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
सहायता सहायता सहायता सहायता सहायता
  • पिछला पृष्ठ <kbd>
  • अगला पृष्ठ <legend>