टैग label
टैग label इनपुट फ़ील्ड के लिए एक लेबल निर्दिष्ट करता है
जैसे input,
textarea,
select
आदि।
लेबल for विशेषता का उपयोग करके एक विशिष्ट इनपुट
फ़ील्ड से जुड़ा होता है। इसमें उस इनपुट फ़ील्ड की
id विशेषता का मान
निर्दिष्ट करना चाहिए, जिससे लेबल जुड़ा हुआ है। लेबल
तत्व से भी जुड़ जाता है यदि उस तत्व को label टैग के
अंदर रखा जाता है। इस मामले में for विशेषता निर्दिष्ट
करने की आवश्यकता नहीं है। बेहतर समझ के लिए उदाहरण देखें।
लेबल पर क्लिक करने से इससे जुड़े चेकबॉक्स या रेडियो बटन अपनी स्थिति चेक से अनचेक और इसके विपरीत बदल देंगे। इस मामले में लेबल सुविधा के लिए आवश्यक है: फॉर्म के छोटे तत्वों पर कर्सर से क्लिक करना मुश्किल होता है, जबकि लंबे पाठ वाले लेबल पर क्लिक करना काफी आसान होता है।
लेबल से जुड़ा टेक्स्ट इनपुट फ़ील्ड
जैसे input
और textarea
इनपुट फोकस प्राप्त करेगा। फोकस
- तब होता है जब कर्सर इनपुट फ़ील्ड में ब्लिंक कर रहा होता है,
ऐसे में, यदि आप कीबोर्ड पर कुछ लिखते हैं - तो वह टेक्स्ट इस फ़ील्ड
में दिखाई देगा (फोकस की उन्नत समझ के लिए
focus
स्यूडोक्लास देखें)।
label लेबल का उपयोग चेकबॉक्स
या रेडियो
बटन की नकल करने के लिए किया जा सकता है। इसकी आवश्यकता
अपने स्वयं के डिज़ाइन के साथ checkbox या radio बनाने के लिए होती है (जो
CSS के साथ प्रतिबंधित है, लेकिन चतुर तरीकों से
संभव है)।
विशेषताएँ
| विशेषता | विवरण |
|---|---|
for |
इस विशेषता में उस इनपुट फ़ील्ड के id विशेषता का मान निर्दिष्ट करना चाहिए
जिससे label लेबल जुड़ा हुआ है।
|
accesskey |
एक हॉटकी निर्दिष्ट करता है, जिसकी सहायता से लेबल से जुड़े
(for विशेषता के माध्यम से) फॉर्म तत्व पर जाया जा सकता है।
अधिक जानकारी के लिए accesskey विशेषता देखें।
|
उदाहरण . चेकबॉक्स
आइए checkbox
फ्लैगबॉक्स से for विशेषता का उपयोग करके एक लेबल जोड़ते हैं।
लेबल पर क्लिक करें और आप फ्लैगबॉक्स की स्थिति का
चेक से अनचेक और इसके विपरीत बदलाव देखेंगे:
<input type="checkbox" id="checkbox">
<label for="checkbox">मैं id checkbox वाले चेकबॉक्स से जुड़ा हूं।</label>
:
उदाहरण . label के अंदर
और अब आइए लेबल को for विशेषता के माध्यम से न जोड़ें,
बल्कि तत्वों को सीधे label टैग के अंदर रख दें, इस मामले में
label के टेक्स्ट पर क्लिक करने से भी तत्व सक्रिय हो जाएगा:
<label><input type="checkbox"> लेबल</label>
:
उदाहरण . टेक्स्ट इनपुट फ़ील्ड
आइए input टैग
से for विशेषता का उपयोग करके एक लेबल जोड़ते हैं।
लेबल पर क्लिक करने से इनपुट फ़ील्ड को फोकस मिलेगा। साथ ही फ़ील्ड में मौजूद
टेक्स्ट (जिसे हम value
विशेषता का उपयोग करके जोड़ेंगे)
हाइलाइट हो जाएगा। यदि आप कीबोर्ड पर कुछ भी लिखना शुरू करते हैं - तो यह टेक्स्ट मिट जाएगा।
टेक्स्ट को मिटाए बिना हाइलाइट से छुटकारा पाने के लिए, आप
इनपुट फ़ील्ड पर माउस से क्लिक कर सकते हैं: फोकस
गायब नहीं होगा, लेकिन हाइलाइट हट जाएगी:
<input type="text" id="input1" value="कोई टेक्स्ट">
<label for="input1">मैं id input1 वाले इनपुट से जुड़ा हूं।</label>
:
यह भी देखें
-
टैग
legend,
जो फ़ील्ड समूह के ऊपर एक कैप्शन निर्दिष्ट करता है
