แอตทริบิวต์ for: ผูก Label กับ Form Element ใน HTML

แอตทริบิวต์ for ใช้ในแท็ก <label> เพื่อผูกกับฟิลด์ Input โดยระบุ id ของ Input นั้น ทำให้คลิกที่ Label จะโฟกัส/ทำงานกับ Input นั้นได้ (Accessibility สำคัญ)

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
    <p>การศึกษา:</p>
    <form action="">
        <label for="graduate">ปริญญาตรี</label>
        <input type="radio" name="education" id="graduate" value="graduate"><br>
        
        <label for="ugraduate">ต่ำกว่าปริญญาตรี</label>
        <input type="radio" name="education" id="ugraduate" value="ugraduate"><br>
        
        <input type="submit" value="ส่ง">
    </form>
</body>
</html>

วิธีผูก Label กับ Input (2 วิธี)

วิธี	โค้ด	ข้อดี/ข้อเสีย
for + id (แนะนำ)	`<label for="id">Label</label> <input id="id">`	ยืดหยุ่น Layout ได้, Input และ Label แยกกันได้
Wrap Input ใน Label	`<label>Label <input></label>`	ง่ายกว่า ไม่ต้องตั้ง id, แต่ Layout จำกัด

ทำไมต้องใช้ Label + for? (Accessibility)

🎯 Click Target ใหญ่ขึ้น: คลิกข้อความ Label ก็เลือก Input ได้ (สำคัญสำหรับ Checkbox/Radio บน Mobile)
🔊 Screen Readers: อ่าน Label เมื่อโฟกัส Input
⌨️ Keyboard Navigation: รองรับการนำทางด้วยคีย์บอร์ดดีขึ้น
✅ WCAG 2.1 Compliance: ต้องมี Label ที่ผูกกับ Input ทุกตัว

องค์ประกอบที่รองรับ Label (for)

<input> (ทุก type ยกเว้น hidden)
<select>
<textarea>
<meter>, <progress>

ตัวอย่าง Checkbox/Radio ที่ดี

<fieldset>
    <legend>เลือกหัวข้อที่สนใจ</legend>
    <label><input type="checkbox" name="topics" value="html"> HTML</label><br>
    <label><input type="checkbox" name="topics" value="css"> CSS</label><br>
    <label><input type="checkbox" name="topics" value="js"> JavaScript</label>
</fieldset>