Forms

1. Workshop 1: Form Skeleton

เป้าหมายระดับ 1: - มี form เป็นโครงหลัก - มี label จับคู่กับ input อย่างถูกต้อง - มีปุ่ม submit สำหรับส่งข้อมูล

2. Workshop 2: Form Attributes

เป้าหมายระดับ 2: - ใช้ method และ action บน form - ใช้ name/required/placeholder ให้ field สำคัญ - รวม input, select, textarea ในฟอร์มเดียวอย่างมีเป้าหมาย

3. Workshop 3: Grouped Form (Advanced)

เป้าหมายระดับ 3: - จัดฟอร์มหลายส่วนด้วย fieldset และ legend - แยกกลุ่มข้อมูลให้ชัด (ข้อมูลผู้สมัคร/การติดต่อ/ความต้องการ) - คุมโครงสร้างให้ยังอ่านง่ายเมื่อฟอร์มยาวขึ้น

4. Recap + จุดพลาดที่พบบ่อย

• ฟอร์มที่ดีเริ่มจากโครงสร้างชัดเจนก่อน แล้วค่อยเพิ่มแอตทริบิวต์
• label ควรจับคู่กับ id ของ field เสมอเพื่อการใช้งานและการเข้าถึงที่ดี
• required/name/method/action คือชุดพื้นฐานที่ทำให้ฟอร์มพร้อมใช้งานจริง
• เมื่อฟอร์มยาวขึ้น ควรใช้ fieldset/legend แบ่งกลุ่มข้อมูลเพื่อลดความสับสน