HTML
Forms
label
บทนี้สอนผู้เริ่มต้นให้เข้าใจว่า `label` คือข้อความกำกับช่องกรอกข้อมูลที่ต้องเชื่อมกับ input อย่างมีโครงสร้างผ่าน `for`/`id` เพื่อให้ฟอร์มอ่านง่าย ใช้งานง่าย และเข้าถึงได้ดีขึ้น
1. หัวข้อนี้คืออะไร
`label` คือข้อความกำกับช่องกรอกข้อมูลในฟอร์ม เพื่อบอกผู้ใช้ว่าช่องนั้นรับข้อมูลอะไร ตัวอย่างเช่น ช่องอีเมลควรมีข้อความกำกับว่า "อีเมล" และต้องเชื่อมกับ input ที่ถูกต้อง ไม่ใช่แค่วางข้อความไว้ข้าง ๆ
2. ทำไมหัวข้อนี้สำคัญ
- ทำให้ผู้ใช้เข้าใจทันทีว่าแต่ละช่องต้องกรอกอะไร
- ช่วยให้ฟอร์มอ่านง่ายและลดโอกาสกรอกผิดช่อง
- เมื่อคลิกที่ label สามารถโฟกัสหรือเลือก input ที่เชื่อมกันได้
- เป็นพื้นฐานสำคัญของ accessibility สำหรับฟอร์มที่ใช้งานได้กับทุกคน
3. ตัวอย่างจากชีวิตจริง
ในฟอร์มสมัครสมาชิก ถ้ามีแต่ช่องว่างหลายช่องโดยไม่มี label ผู้ใช้จะสับสนว่าอันไหนคือชื่อ อันไหนคืออีเมล แต่เมื่อมี `label` ชัดเจน เช่น "ชื่อ", "อีเมล", "รหัสผ่าน" ผู้ใช้จะกรอกได้เร็วขึ้นและผิดพลาดน้อยลง
4. แนวคิดหลักที่ต้องเข้าใจ
- `label` ไม่ใช่แค่ข้อความตกแต่ง แต่เป็นความสัมพันธ์เชิงโครงสร้างกับ input
- วิธีเชื่อมมาตรฐานคือ `label for="..."` ให้ตรงกับ `input id="..."`
- หนึ่ง input ควรมี label ที่สื่อความหมายชัดเจน
- checkbox และ radio ก็ควรมี label เพื่อให้รู้ว่าตัวเลือกนั้นหมายถึงอะไร
- การใช้ label ถูกต้องช่วยให้เทคโนโลยีช่วยอ่านหน้าจอเข้าใจฟอร์มได้ดีขึ้น
5. การทำงานทีละขั้นตอน
- 1) กำหนดข้อมูลที่ต้องรับในแต่ละช่องก่อน
- 2) สร้าง `input` และตั้ง `id` ให้ไม่ซ้ำกัน
- 3) สร้าง `label` แล้วกำหนด `for` ให้ตรงกับ `id` ของ input
- 4) ตรวจว่าเมื่อคลิก label แล้ว input ที่เกี่ยวข้องได้รับ focus หรือถูกเลือก
- 5) ทบทวนข้อความ label ให้สั้น ชัด และตรงความหมายของข้อมูล
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้แสดงการเชื่อม `label` กับ input ผ่าน `for`/`id` และมี checkbox/radio ที่ใช้ label อย่างถูกต้อง
7. จุดที่ผู้เริ่มต้นมักสับสน
- วางข้อความธรรมดาข้าง input แล้วคิดว่าเท่ากับใช้ label
- ใช้ `for` ไม่ตรงกับ `id` ทำให้ความสัมพันธ์ขาด
- ลืมใส่ label ให้ checkbox หรือ radio เพราะคิดว่าไม่จำเป็น
- ใช้ข้อความ label กว้างเกินไป เช่น "ข้อมูล" จนไม่รู้ว่าต้องกรอกอะไร
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| กรณี | ผลลัพธ์ต่อผู้ใช้ | แนวทางที่ควรใช้ |
|---|---|---|
| มี label vs ไม่มี label | มี label จะรู้ความหมายช่องชัดเจน, ไม่มี label จะเดายากและใช้งานยาก | ทุก input สำคัญควรมี label |
| ข้อความธรรมดา vs `<label for=...>` | ข้อความธรรมดาไม่สร้างความสัมพันธ์กับ input, label สร้างความสัมพันธ์เชิงโครงสร้าง | ใช้ label ที่เชื่อม for/id เสมอ |
| label ไม่เชื่อม for/id vs label เชื่อมถูกต้อง | ไม่เชื่อมทำให้คลิก label แล้วไม่โฟกัสช่องที่ถูกต้อง | ตั้ง id ให้ชัด และให้ for ตรง id ทุกครั้ง |
9. สรุปท้ายบทแบบจำง่าย
- `label` คือชื่อกำกับช่องกรอกข้อมูล
- ฟอร์มที่ไม่มี label จะใช้งานยากและสับสนง่าย
- ความถูกต้องอยู่ที่ความสัมพันธ์ `for` และ `id` ไม่ใช่แค่วางข้อความข้างช่อง
- checkbox/radio ก็ต้องมี label ที่ชัดเจน
- label ที่ดีช่วยทั้งการใช้งานทั่วไปและ accessibility
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อสร้างความสัมพันธ์ label/input ให้ถูกต้องและตรวจผ่านระบบอัตโนมัติ
Lab 1 (พื้นฐาน): เพิ่ม label ให้ input หนึ่งช่อง
ชื่อ Lab: ตั้งชื่อช่องให้ชัด เป้าหมาย: เพิ่ม label ให้ input หนึ่งช่องและเชื่อม for/id ให้ถูกต้อง โจทย์: ใน <form id="single-field-form"> ให้มี <label for="first-name">ชื่อ</label> และ <input id="first-name" type="text"> พร้อมปุ่ม submit ข้อความ "ส่ง" เงื่อนไข: ต้องมี label 1 ตัว, input 1 ตัว, และ for/id ต้องจับคู่กัน สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: สร้าง id ของ input ก่อน แล้วให้ for ของ label อ้าง id เดียวกัน เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 2 (กลาง): เชื่อม label กับ input หลายช่องให้ถูก
ชื่อ Lab: ฟอร์มหลายช่องที่อ่านง่าย เป้าหมาย: เชื่อม label กับ input หลายช่องในฟอร์มเดียวให้ถูกต้องทั้งหมด โจทย์: สร้าง <form id="multi-field-form"> ที่มี label+input ครบ 3 คู่ ได้แก่ name-field (text), email-field (email), password-field (password) เงื่อนไข: label แต่ละตัวต้องมี for ตรงกับ id ของ input คู่ของตัวเอง และมีปุ่ม submit ข้อความ "สมัครสมาชิก" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: วางรูปแบบเป็นคู่ label/input ทีละช่องเพื่อลดการจับคู่ผิด เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 3 (ท้าทาย): แก้ฟอร์มที่มีข้อความแต่ไม่ได้ใช้ label อย่างถูกต้อง
ชื่อ Lab: เปลี่ยนข้อความธรรมดาให้เป็น label ที่ถูกต้อง เป้าหมาย: แก้ฟอร์มที่ใช้ข้อความนำหน้า input แต่ยังไม่มีความสัมพันธ์เชิงโครงสร้าง โจทย์: จากโค้ดตั้งต้น ให้แก้ให้เป็น label ที่เชื่อมกับ input ทุกช่อง: full-name, contact-email และ agree-policy (checkbox) เงื่อนไข: ต้องคง form#fix-label-form และปุ่ม submit ข้อความ "บันทึก" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: เปลี่ยนข้อความธรรมดาเป็นแท็ก label และผูก for/id ให้ครบทุกช่อง เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 4 (ท้าทาย): เพิ่ม label ให้ครบในฟอร์มสมัครรับข่าวสาร
ชื่อ Lab: ซ่อมฟอร์มสมัครข่าวสารให้มี label ครบ เป้าหมาย: ฝึกเชื่อม label กับ input ให้ครบทุกช่องในฟอร์มง่าย ๆ โจทย์: จากโค้ดตั้งต้น ให้แก้ให้เป็น label ที่เชื่อมกับ input ทุกช่อง: first-name, user-email และ accept-news (checkbox) เงื่อนไข: ต้องคง form#newsletter-signup และปุ่ม submit ข้อความ "สมัครรับข่าวสาร" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: ทุก input ควรมีข้อความกำกับผ่าน label ไม่ใช่ใช้ p หรือ span วางลอย ๆ เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 5 (ท้าทาย): แก้ฟอร์มข้อมูลติดต่อให้ใช้ label ถูกต้อง
ชื่อ Lab: จัดโครงสร้างข้อความกำกับให้เป็น label เป้าหมาย: ฝึกแยกแยะข้อความที่ควรเป็น label ในฟอร์มข้อมูลติดต่อ โจทย์: จากโค้ดตั้งต้น ให้แก้ให้เป็น label ที่เชื่อมกับ input ทุกช่อง: phone-number, company-name และ accept-contact (checkbox) เงื่อนไข: ต้องคง form#contact-form-label และปุ่ม submit ข้อความ "ส่งข้อมูล" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: ข้อความที่บอกว่า field นี้คืออะไร ควรอยู่ใน label ที่เชื่อมกับ id ของ input เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 6 (ท้าทาย): ซ่อมฟอร์มลงทะเบียนให้ใช้ label ครบทุกช่อง
ชื่อ Lab: เปลี่ยนข้อความกำกับให้เป็น label ในฟอร์มลงทะเบียน เป้าหมาย: ฝึกสร้างความสัมพันธ์ระหว่างข้อความกำกับกับ input อย่างถูกต้อง โจทย์: จากโค้ดตั้งต้น ให้แก้ให้เป็น label ที่เชื่อมกับ input ทุกช่อง: username, register-email และ accept-terms (checkbox) เงื่อนไข: ต้องคง form#register-label-form และปุ่ม submit ข้อความ "สร้างบัญชี" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: เมื่อผู้ใช้กดข้อความใน label ก็ควรสัมพันธ์กับ input ช่องนั้นได้ เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้