การใช้“ ป้ายกำกับสำหรับ” บนปุ่มตัวเลือก

เมื่อใช้พารามิเตอร์ "label for" บนปุ่มตัวเลือกเพื่อให้เป็นไปตาม 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>

เหตุผลที่ฉันถามคือในตัวอย่างที่สอง "ป้ายกำกับ" เป็นเพียงการล้อมรอบข้อความไม่ใช่ปุ่มตัวเลือกจริง

* มาตรา 508 ของพระราชบัญญัติการฟื้นฟูสมรรถภาพปี 1973 กำหนดให้หน่วยงานของรัฐบาลกลางจัดหาซอฟต์แวร์และการเข้าถึงเว็บไซต์สำหรับคนพิการ

คุณเกือบจะได้รับมัน ควรเป็นดังนี้:

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

ค่าในforควรเป็นรหัสขององค์ประกอบที่คุณกำลังติดป้ายกำกับ

โครงสร้างอย่างใดอย่างหนึ่งถูกต้องและสามารถเข้าถึงได้ แต่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;}

(อันดับแรกอ่านคำตอบอื่น ๆ ที่อธิบายไว้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>