HTML
Forms
fieldset / legend
บทนี้สอนการใช้ `fieldset` และ `legend` เพื่อจัดกลุ่มข้อมูลในฟอร์มให้ชัดเจน อ่านง่าย และดูแลต่อได้ง่ายขึ้น พร้อมแบบฝึก 3 ระดับที่ตรวจผลผ่าน Playground ได้จริง
1. หัวข้อนี้คืออะไร
`<fieldset>` คือแท็กที่ใช้จัดกลุ่ม field ที่เกี่ยวข้องกันในฟอร์ม ส่วน `<legend>` คือชื่อของกลุ่มนั้น เมื่อฟอร์มเริ่มมีหลายส่วน เช่น ข้อมูลส่วนตัว, ช่องทางติดต่อ, และความต้องการพิเศษ การแบ่งกลุ่มด้วย fieldset จะช่วยให้โครงสร้างชัดกว่าการวาง input ต่อกันยาว ๆ
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยให้ผู้เรียนมองเห็นโครงสร้างฟอร์มเป็นส่วน ๆ
- ทำให้ชื่อกลุ่มข้อมูลชัดเจนผ่าน legend
- ลดความสับสนเมื่อฟอร์มมีหลาย field
- ช่วยให้โค้ดอ่านง่ายขึ้นทั้งตอนทำงานเดี่ยวและทำงานเป็นทีม
3. ตัวอย่างจากชีวิตจริง
ลองนึกถึงฟอร์มสมัครเวิร์กช็อปที่มีข้อมูลหลายประเภท: - ข้อมูลผู้สมัคร - ช่องทางติดต่อ - ความต้องการเพิ่มเติม ถ้าวางทุกช่องติดกัน ผู้ใช้จะอ่านยาก แต่ถ้าแบ่งเป็น fieldset พร้อม legend ผู้ใช้จะเข้าใจลำดับได้ทันที
4. แนวคิดหลักที่ต้องเข้าใจ
- `fieldset` ใช้จัดกลุ่ม controls ที่เกี่ยวข้องกัน
- `legend` ควรอธิบายกลุ่มนั้นให้สั้นและชัด
- หนึ่งกลุ่มควรมีเป้าหมายเดียว เช่น ข้อมูลติดต่อ
- อย่าวาง fieldset ซ้อนกันโดยไม่จำเป็น เพราะทำให้โครงสร้างซับซ้อนเกินไป
- การมี fieldset ไม่ได้แทน label: แต่ละ input ยังควรมี label ของตัวเอง
5. การทำงานทีละขั้นตอน
- 1) วางโครง form หลักก่อน
- 2) แยกกลุ่มข้อมูลที่จะรับเป็นหัวข้อย่อย
- 3) สร้าง fieldset ตามจำนวนกลุ่มข้อมูล
- 4) ใส่ legend ให้แต่ละ fieldset และวาง field ที่เกี่ยวข้องในกลุ่มนั้น
- 5) ตรวจว่าแต่ละ field ยังมี label และชื่อกลุ่มอ่านเข้าใจง่าย
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างฟอร์มนี้แบ่งข้อมูลออกเป็น 2 กลุ่มชัดเจนด้วย fieldset/legend
7. จุดที่ผู้เริ่มต้นมักสับสน
- มี fieldset แต่ไม่มี legend ทำให้ไม่รู้ว่ากลุ่มนั้นคืออะไร
- เข้าใจว่า fieldset แทน label ได้ แล้วลืมใส่ label ให้ input
- เอา field ที่คนละเรื่องไว้ใน fieldset เดียวจนกลุ่มไม่สื่อความหมาย
- ซ้อน fieldset หลายชั้นโดยไม่มีเหตุผล ทำให้แก้ไขยาก
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| กรณี | ผลลัพธ์ | แนวทางที่ควรใช้ |
|---|---|---|
| วาง input ต่อกัน vs แบ่งด้วย fieldset | วางต่อกันจะอ่านยากเมื่อฟอร์มยาว, fieldset ช่วยเห็นขอบเขตข้อมูล | เมื่อฟอร์มมีหลายกลุ่ม ให้ใช้ fieldset |
| fieldset ไม่มี legend vs มี legend | ไม่มี legend จะไม่รู้ความหมายกลุ่ม, มี legend จะสื่อสารชัด | ใส่ legend ทุก fieldset |
| fieldset vs label | fieldset คือระดับกลุ่ม, label คือระดับ field | ใช้ทั้งคู่ร่วมกันอย่างเหมาะสม |
9. สรุปท้ายบทแบบจำง่าย
- `fieldset` ใช้แบ่งกลุ่มข้อมูลในฟอร์ม
- `legend` ใช้ตั้งชื่อกลุ่มใน fieldset
- field แต่ละตัวในกลุ่มยังต้องมี label
- ฟอร์มยิ่งซับซ้อน ยิ่งควรจัดกลุ่มให้ชัด
- คิดเป็นกลุ่มข้อมูลก่อน แล้วค่อยวาง controls ลงในแต่ละ fieldset
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อจัดกลุ่มฟอร์มด้วย fieldset/legend ให้ถูกต้องและตรวจผลได้จริง