แอตทริบิวต์ for ขององค์ประกอบ <label> ใช้สำหรับ ผูก label กับ element โดยระบุ id ของ element นั้น เมื่อผู้ใช้คลิกที่ label Element ที่ผูกไว้จะได้รับโฟกัส (สำหรับ input) หรือถูกติ๊ก (สำหรับ checkbox/radio)
ไวยากรณ์ (Syntax)
<label for="id">
id คือ id ของ element ที่ต้องการผูก
ตัวอย่างการใช้งาน
<!DOCTYPE html>
<html>
<body>
<h2>ผลการสอบภาคปลาย</h2>
<form>
<fieldset>
<legend>ผลลัพธ์</legend>
<label for="stinfo">นักเรียน:</label>
<input type="text" id="stinfo" value="Jack"><br>
<label for="sub">วิชา:</label>
<input type="text" value="คณิตศาสตร์"><br>
<label for="rank">อันดับ:</label>
<input type="number" value="8"><br>
</fieldset>
</form>
</body>
</html>
ผลลัพธ์
แสดงฟอร์มพร้อม label "นักเรียน:", "วิชา:", "อันดับ:" คลิกที่ label "นักเรียน:" ช่องกรอก id="stinfo" จะได้รับโฟกัส
คำอธิบายโค้ด
<label for="stinfo">นักเรียน:</label>ผูกกับ<input id="stinfo"><label for="sub">วิชา:</label>ผูกกับ<input id="sub">(ตัวอย่างขาด id — ควรเพิ่ม)<label for="rank">อันดับ:</label>ผูกกับ<input id="rank">(ตัวอย่างขาด id — ควรเพิ่ม)
แก้ไขโค้ดให้ถูกต้อง:
<label for="sub">วิชา:</label> <input type="text" id="sub" value="คณิตศาสตร์"><br> <label for="rank">อันดับ:</label> <input type="number" id="rank" value="8"><br>
ประโยชน์ของ label for
- เข้าถึงได้ (Accessibility) — Screen reader จะอ่าน label ให้ผู้ใช้ทราบ
- ใช้งานง่าย (Usability) — คลิก label ได้ = คลิก input ได้ (พื้นที่กว้างขึ้น)
- SEO — โครงสร้างฟอร์มชัดเจน ช่วยให้ search engine เข้าใจ
รองรับ element: input, textarea, select, meter, progress, button, output
