रेडियो बटन पर "लेबल के लिए" का उपयोग करना

Question

रेडियो बटन पर "लेबल के लिए" पैरामीटर का उपयोग करते समय, 508 * का अनुपालन करने के लिए , निम्नलिखित सही है?

 <label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label> 

या यह है

 <input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label>

कारण मैं पूछ रहा हूं कि दूसरे उदाहरण में, "लेबल" केवल पाठ को शामिल कर रहा है न कि वास्तविक रेडियो बटन को।

* 1973 के पुनर्वास अधिनियम की धारा 508 में विकलांग लोगों को सॉफ्टवेयर और वेबसाइट पहुंच प्रदान करने के लिए संघीय एजेंसियों की आवश्यकता है।

Answer 1

आपने लगभग पा लिया। ऐसा होना चाहिए:

<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>

मान forउस तत्व का होना चाहिए जो आप लेबल कर रहे हैं।

Comments

आप का उत्तर निश्चित रूप से सही है, लेकिन मार्था के पास सही उत्तर है। मार्था के दोनों उदाहरण पूरी तरह से मान्य HTML5 हैं। और उदाहरण के लिए यदि आप पूरी चीज को एक फ्रेम में रखना चाहते हैं, तो सीएसएस का उपयोग करके दूसरे को स्टाइल करना आसान है। यदि आप चाहते हैं कि लेबल कहीं और हों, तो पहला। लेकिन दोनों ठीक हैं। सादर!

— जैसक कोवेल्स्की

हम्म .. आप दो रेडियो बटन के बीच एक लेबल टॉगल कैसे बनाते हैं? आपके पास दो समान आईडी नहीं हो सकती हैं ...: /

— Nils Sens

@ निल्स प्रत्येक रेडियो और लेबल की जोड़ी के पास अद्वितीय आईडी होनी चाहिए, उन्हें कभी भी आईडी साझा नहीं करना चाहिए

— डैनियल वाटर्स

@ निल्सेंस 2 रेडियो बटन के बीच टॉगल करता है और उनके पास केवल 1 लेबल है? इसके बजाय चेकबॉक्स का उपयोग करने के लिए एक स्पष्ट मामले की तरह लगता है: D

— T_D

आह, नहीं मेरा मतलब है कि एक सुपर-लेबल था जो रेडियो बटन को टॉगल करता है। पसंद: श्रेणी पसंदीदा फल और जब आप उस एक पर क्लिक करते हैं, तो आप आईडी "केला" और "स्ट्रॉबेरी" के बीच टॉगल करते हैं, क्योंकि, माउस आंदोलन यूएक्स को क्यों लागू करते हैं जब आप सिर्फ विकल्पों को टॉगल कर सकते हैं। आज, मैं जेएस का उपयोग सिर्फ हाथ के कोड के लिए करूंगा, लेकिन यह जानना दिलचस्प होगा कि क्या सीएसएस केवल एक ही तरीका है :)

— निल्स सेंसर

Answer 2

या तो संरचना वैध और सुलभ है, लेकिन forविशेषता idइनपुट तत्व के बराबर होनी चाहिए :

<input type="radio" ... id="r1" /><label for="r1">button text</label>

या

<label for="r1"><input type="radio" ... id="r1" />button text</label>

forदूसरे संस्करण (लेबल युक्त इनपुट) में यह विशेषता वैकल्पिक है, लेकिन IIRC में कुछ पुराने ब्राउज़र थे जो तब तक लेबल टेक्स्ट को क्लिक करने योग्य नहीं बनाते थे जब तक आप इसे शामिल नहीं करते। पहला संस्करण (इनपुट के बाद लेबल) बगल के सिबलिंग चयनकर्ता का उपयोग करके CSS के साथ स्टाइल करना आसान है +:

input[type="radio"]:checked+label {font-weight:bold;}

Comments

सच है, हालांकि दूसरे उदाहरण में, "के लिए" विशेषता की आवश्यकता नहीं है।

— इस्माईल

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

— मार्था

@ मर्था - क्या आप जानते हैं कि कौन से ब्राउज़र हैं?

— किर्कलैंड

@Kirkland - w3.org/TR/html401/interact/forms.html#h-17.9 से प्रतीत होता है कि दूसरा फ़ॉर्म वैध है, लेकिन कई स्रोतों से संकेत मिलता है कि समर्थन सार्वभौमिक नहीं हो सकता है। forकिसी भी मामले में विशेषता प्रदान करना संभवतः सबसे अच्छा है ।

— इस्माईल

@RalphDavidAbernathy हाँ, चेक बॉक्स के लिए वही नियम लागू होते हैं।

— इश्माएल

Answer 3

(पहले उन अन्य उत्तरों को पढ़ें जिन्हें टैग forमें समझाया गया है <label></label>। खैर, दोनों शीर्ष उत्तर सही हैं, लेकिन मेरी चुनौती के लिए, यह तब था जब आपके पास कई रेडियो बॉक्स हैं, आपको उनके लिए एक सामान्य नाम चुनना चाहिए , name="r1" लेकिन अलग-अलग आईडी के साथ id="r1_1" ... id="r1_2"

तो इस तरह से उत्तर अधिक स्पष्ट है और नाम और आईडी के बीच के टकराव को भी हटा देता है।

रेडियो बॉक्स के विभिन्न विकल्पों के लिए आपको अलग-अलग आईडी की आवश्यकता होती है।

<input type="radio" name="r1" id="r1_1" />

       <label for="r1_1">button text one</label>
       <br/>
       <input type="radio" name="r1" id="r1_2" />

       <label for="r1_2">button text two</label>
       <br/>
       <input type="radio" name="r1" id="r1_3" />

       <label for="r1_3">button text three</label>