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




forms input (3)

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

<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 को मान्य करता है या किसी अन्य कारण से आवश्यक है?


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

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

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


संक्षेप में यह इनपुट की 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">

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





label