HTML
Forms
select / option
บทนี้สอนผู้เริ่มต้นให้ใช้ `select` และ `option` เพื่อให้ผู้ใช้เลือกค่าจากรายการที่กำหนดไว้ชัดเจน พร้อมเข้าใจความต่างจาก `input type="text"` และฝึกผ่าน Playground ที่ตรวจผลได้จริง
1. หัวข้อนี้คืออะไร
`select` คือช่องสำหรับให้ผู้ใช้เลือกค่าจากรายการตัวเลือกที่กำหนดไว้ล่วงหน้า ภายใน `select` จะประกอบด้วย `option` หลายตัว โดยแต่ละ `option` คือหนึ่งตัวเลือกที่ผู้ใช้มองเห็นและเลือกได้
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยจำกัดคำตอบให้อยู่ในชุดค่าที่ถูกต้อง
- ลดความผิดพลาดจากการพิมพ์เองแบบอิสระ
- ทำให้ข้อมูลที่ส่งไประบบมีรูปแบบสม่ำเสมอ
- เมื่อใช้ร่วมกับ label จะทำให้ฟอร์มอ่านง่ายและใช้งานง่ายขึ้น
3. ตัวอย่างจากชีวิตจริง
ตัวอย่างที่มักใช้ `select / option`: - เลือกจังหวัด - เลือกประเทศ - เลือกประเภทสมาชิก - เลือกหมวดหมู่บทความ กรณีเหล่านี้มีชุดคำตอบชัดเจนอยู่แล้ว จึงเหมาะกับการให้ผู้ใช้เลือกมากกว่าพิมพ์เอง
4. แนวคิดหลักที่ต้องเข้าใจ
- `select` เหมาะกับข้อมูลที่มีตัวเลือกชัดเจน
- `option` คือรายการย่อยแต่ละตัวเลือกภายใน `select`
- `option value` คือค่าที่ระบบจะรับเมื่อผู้ใช้เลือกตัวเลือกนั้น
- `select` ต่างจาก `input type="text"` ที่เปิดให้พิมพ์อิสระ
- ควรจับคู่ `label` กับ `select` ผ่าน `for` และ `id` เพื่อความชัดเจน
5. การทำงานทีละขั้นตอน
- 1) ระบุว่าฟิลด์นี้มีชุดค่าที่แน่นอนหรือไม่
- 2) ถ้ามีชุดค่าชัดเจน ให้ใช้ `<select>` แทน input text
- 3) ใส่ `label` และเชื่อม `for` ให้ตรงกับ `id` ของ select
- 4) เพิ่ม `option` แต่ละค่า โดยกำหนด `value` ให้สื่อความหมาย
- 5) ตรวจว่าค่า `value` ที่เลือกตรงกับสิ่งที่ระบบคาดหวัง
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้ใช้ `label` คู่กับ `select` และมี `option` หลายค่า พร้อม `value` ที่ใช้ส่งให้ระบบ
7. จุดที่ผู้เริ่มต้นมักสับสน
- ใช้ `input type="text"` กับข้อมูลที่มีตัวเลือกตายตัว
- ลืมใส่ `value` ใน option ทำให้ค่าไม่ชัดเจนตอนส่งข้อมูล
- คิดว่า `option` ต้องเขียนแต่ข้อความ ไม่ต้องสนใจค่าภายใน
- ลืมเชื่อม `label` กับ `select` ทำให้ฟอร์มอ่านยากขึ้น
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| `select` vs `input type="text"` | select เลือกจากรายการที่กำหนด, input text พิมพ์อิสระ | มีชุดค่าชัดเจนใช้ select, ข้อความอิสระใช้ input text |
| `option` text vs `option value` | ข้อความคือสิ่งที่ผู้ใช้เห็น, value คือค่าที่ระบบรับ | ตั้ง value ให้คงที่และสื่อความหมาย |
| มี label + select vs ไม่มี label | มี label ทำให้รู้ทันทีว่าต้องเลือกอะไร, ไม่มี label จะสับสน | ใช้ label คู่กับ select เสมอ |
9. สรุปท้ายบทแบบจำง่าย
- `select` ใช้เลือกจากชุดตัวเลือกที่กำหนดไว้
- `option` คือแต่ละตัวเลือกใน select
- `value` คือค่าที่ระบบใช้จริงเมื่อผู้ใช้เลือก
- ถ้าข้อมูลมีตัวเลือกชัดเจน ใช้ select ดีกว่า input text
- อย่าลืมใช้ label เพื่อให้ฟอร์มใช้งานง่าย
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อใช้ select/option ให้เหมาะกับข้อมูลและตรวจผ่านระบบอัตโนมัติ
Lab 1 (พื้นฐาน): สร้าง select พื้นฐาน
ชื่อ Lab: เริ่มต้นสร้าง dropdown เป้าหมาย: สร้าง select พื้นฐานพร้อม label โจทย์: สร้าง <form id="category-form"> ที่มี <label for="category">หมวดหมู่</label> และ <select id="category"> โดยมี option อย่างน้อย 2 ตัว และปุ่ม submit ข้อความ "บันทึก" เงื่อนไข: ต้องมี label + select เชื่อม for/id และมี option อย่างน้อย 2 ตัว สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: สร้าง select ก่อน แล้วเติม option พื้นฐานให้ครบ เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 2 (กลาง): เพิ่ม option หลายค่า
ชื่อ Lab: เติมตัวเลือกให้ครบ เป้าหมาย: เพิ่ม option หลายค่าและกำหนด value ให้ชัดเจน โจทย์: สร้าง <form id="country-form"> ที่มี <select id="country"> และ option 4 ค่า: ไทย, ญี่ปุ่น, สหรัฐอเมริกา, ออสเตรเลีย โดยกำหนด value แบบอังกฤษตัวพิมพ์เล็ก เงื่อนไข: ต้องมี label for="country" และทุก option ต้องมี value สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: คิดข้อความแสดงผลให้ผู้ใช้เข้าใจง่าย และตั้ง value ให้ระบบใช้ต่อได้ง่าย เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 3 (ท้าทาย): แก้ฟอร์มที่ใช้ input text ทั้งที่ควรใช้ select
ชื่อ Lab: เปลี่ยนจากพิมพ์อิสระเป็นเลือกจากรายการ เป้าหมาย: แก้ field ที่ควรใช้ select แต่เขียนเป็น input text โจทย์: จากโค้ดตั้งต้น ให้เปลี่ยน input#member-type เป็น select#member-type และเพิ่ม option 3 ค่า (basic, pro, enterprise) พร้อมข้อความแสดงผล Basic, Pro, Enterprise เงื่อนไข: ต้องมี label for="member-type" และคงปุ่ม submit ข้อความ "บันทึกประเภทสมาชิก" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: ข้อมูลประเภทสมาชิกเป็นชุดค่าตายตัว จึงควรใช้ select/option เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้