HTML
Semantic HTML
Form Basics (form)
บทนี้สอนผู้เริ่มต้นให้เข้าใจว่า `form` คือจุดรวมข้อมูลจากผู้ใช้ ไม่ใช่แค่หน้าตา โดยครอบ controls ต่าง ๆ และเชื่อมไปสู่การ submit ข้อมูลในระดับพื้นฐาน พร้อมฝึกผ่าน Playground 3 ระดับที่ตรวจผลได้จริง
1. หัวข้อนี้คืออะไร
`form` คือโครงสร้างสำหรับรับข้อมูลจากผู้ใช้ในหน้าเว็บ มองง่าย ๆ ว่า `form` เป็น "จุดรวมข้อมูล" ที่ครอบ controls ต่าง ๆ เช่น `input`, `label`, `select`, `textarea`, และ `button` เมื่อผู้ใช้กรอกข้อมูลครบแล้ว ฟอร์มจะเป็นจุดเริ่มต้นของการ submit ข้อมูลต่อไป
2. ทำไมหัวข้อนี้สำคัญ
- ทำให้เราจัดข้อมูลที่ผู้ใช้กรอกเป็นระบบเดียวกัน
- ช่วยให้ controls หลายชนิดทำงานร่วมกันภายใต้บริบทเดียว
- เป็นพื้นฐานสำคัญของฟีเจอร์สมัครสมาชิก ล็อกอิน ค้นหา หรือส่งแบบสอบถาม
- ทำให้โค้ดอ่านง่ายขึ้นว่า ส่วนไหนคือพื้นที่รับข้อมูลของผู้ใช้
3. ตัวอย่างจากชีวิตจริง
ลองนึกถึงแบบฟอร์มสมัครสมาชิก: - ช่องชื่อ - ช่องอีเมล - เลือกประเภทผู้ใช้งาน - กล่องข้อความเพิ่มเติม - ปุ่มส่งข้อมูล องค์ประกอบเหล่านี้ไม่ควรแยกกระจัดกระจาย แต่ควรถูกรวมใน `form` เดียวเพื่อเป็นชุดข้อมูลเดียวกัน
4. แนวคิดหลักที่ต้องเข้าใจ
- `form` เป็น container ของ controls ต่าง ๆ
- เป้าหมายของ form คือรับและรวบรวมข้อมูลจากผู้ใช้
- `label` ใช้บอกความหมายของ field และควรสัมพันธ์กับ control
- `button type="submit"` คือจุดเริ่มต้นการส่งข้อมูลของฟอร์ม
- บทพื้นฐานนี้เน้นโครงสร้างและความสัมพันธ์ในฟอร์ม ยังไม่ลงลึกฝั่งเซิร์ฟเวอร์
5. การทำงานทีละขั้นตอน
- 1) เริ่มจากสร้าง `<form>` เป็นกรอบหลักของข้อมูล
- 2) ใส่ field ที่ต้องการรับข้อมูล เช่น input, select, textarea
- 3) ใส่ label ให้แต่ละ field เพื่อบอกผู้ใช้ว่าต้องกรอกอะไร
- 4) เพิ่มปุ่ม submit เพื่อให้ผู้ใช้ส่งข้อมูลได้
- 5) ตรวจว่า controls สำคัญถูกครอบอยู่ภายใน form เดียวกัน
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างฟอร์มพื้นฐานนี้มี input อย่างน้อย 2 ช่อง และปุ่ม submit พร้อม controls หลายชนิดใน form เดียว
7. จุดที่ผู้เริ่มต้นมักสับสน
- คิดว่าแค่วาง input ก็พอ โดยไม่ต้องมี form ครอบ
- ใส่ปุ่มแต่ไม่กำหนดเป็น submit
- ลืมใส่ label หรือไม่จับคู่ label กับ field
- คิดว่า form เป็นแค่กล่องตกแต่ง ทั้งที่จริงเป็นจุดรวมข้อมูล
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| `form` vs กลุ่ม input ธรรมดา | form มีบริบทการรวบรวม/ส่งข้อมูล, input เดี่ยว ๆ เป็นแค่ช่องข้อมูล | ถ้าเป็นชุดข้อมูลที่ผู้ใช้ต้องส่ง ควรใช้ form |
| `form` vs `div` | form สื่อความหมายเรื่องรับข้อมูล, div เป็นตัวครอบทั่วไป | ถ้าพื้นที่นั้นคือการกรอกข้อมูลผู้ใช้ ให้ใช้ form |
| `button type="button"` vs `button type="submit"` | submit ใช้ส่งข้อมูลฟอร์ม, button ธรรมดาใช้เหตุการณ์อื่น | ถ้าปุ่มมีหน้าที่ส่งฟอร์ม ให้ใช้ submit |
9. สรุปท้ายบทแบบจำง่าย
- `form` = จุดรวมข้อมูลจากผู้ใช้
- form ควรครอบ controls ที่เกี่ยวข้องกันให้อยู่ชุดเดียว
- controls ที่พบบ่อยคือ input, label, select, textarea, button
- submit คือการส่งข้อมูลของฟอร์มในระดับพื้นฐาน
- คิดเรื่องโครงสร้างก่อนหน้าตา แล้วฟอร์มจะใช้งานได้ชัดเจน
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อสร้างและปรับโครงสร้างฟอร์มให้ถูกต้อง พร้อมตรวจผลอัตโนมัติได้จริง
Lab 1 (พื้นฐาน): สร้าง form พื้นฐาน
ชื่อ Lab: เริ่มต้นสร้างฟอร์มแรก เป้าหมาย: สร้าง form ที่มีช่องข้อมูลหลักและปุ่ม submit โจทย์: สร้าง <form id="basic-form"> ที่ภายในมี input 2 ช่อง (id="name" และ id="email") และมีปุ่ม submit ข้อความ "ส่ง" เงื่อนไข: ต้องมี form#basic-form 1 ตัว, มี input 2 ตัวใน form, และมี button[type="submit"] 1 ตัว สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: สร้างกรอบ form ก่อน แล้วใส่ fields หลักและปุ่มส่งให้ครบ เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 2 (กลาง): เพิ่ม fields หลายชนิดใน form
ชื่อ Lab: เพิ่ม controls ให้ครบหลายรูปแบบ เป้าหมาย: ฝึกวาง input, select, textarea ใน form เดียว โจทย์: สร้าง <form id="profile-form"> ภายในต้องมี input id="username", select id="track", textarea id="about" และปุ่ม submit ข้อความ "บันทึก" เงื่อนไข: controls ทั้งหมดต้องอยู่ภายใน form#profile-form และปุ่มต้องเป็น submit สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: วาง form ก่อน แล้วเติม controls แต่ละชนิดให้ครบตาม id ที่กำหนด เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 3 (ท้าทาย): แก้โค้ดที่มี controls แต่ไม่ได้ครอบด้วย form
ชื่อ Lab: จัด controls ให้กลับมาอยู่ใน form เป้าหมาย: เข้าใจว่า controls ต้องอยู่ในบริบท form เดียวกัน โจทย์: จากโค้ดตั้งต้น ให้ครอบ controls ทั้งหมดด้วย <form id="contact-form"> และกำหนดปุ่มเป็น type="submit" โดยคงข้อความเดิม เงื่อนไข: controls เดิมต้องอยู่ภายใน form#contact-form ทั้งหมด และมีปุ่ม submit 1 ตัว สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: form คือจุดรวมข้อมูล ถ้า controls กระจัดกระจายให้ย้ายเข้ามาใน form เดียว เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้