HTML
Forms
Form Attributes (name, value, placeholder, required)
บทนี้สอนผู้เริ่มต้นให้เข้าใจบทบาทของ attributes สำคัญในฟอร์ม ได้แก่ `name`, `value`, `placeholder`, `required`, `checked`, และ `selected` เพื่อสร้างฟอร์มที่อ่านง่าย ใช้งานถูกต้อง และทดสอบผ่านใน Playground ได้จริง
1. หัวข้อนี้คืออะไร
Form Attributes คือคุณสมบัติที่เราใส่ใน controls ของฟอร์ม เช่น `<input>`, `<select>`, `<option>`, `<textarea>` เพื่อบอกว่า field นี้ชื่ออะไร รับค่าอะไร ต้องกรอกไหม หรือถูกเลือกค่าเริ่มต้นหรือไม่ ตัวอย่าง attributes ที่ใช้บ่อยในบทนี้คือ `name`, `value`, `placeholder`, `required`, `checked`, และ `selected`
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยให้ข้อมูลถูกส่งเป็น key/value ที่ชัดเจน โดยเฉพาะผ่าน `name`
- ลดความสับสนของผู้ใช้เมื่อใส่ `label` และ `placeholder` ให้ถูกบทบาท
- ทำให้ฟอร์มกันค่าว่างในช่องสำคัญได้ด้วย `required`
- ควบคุมค่าตัวเลือกเริ่มต้นได้ด้วย `checked` และ `selected`
3. ตัวอย่างจากชีวิตจริง
ในฟอร์มสมัครสมาชิก: - ช่องอีเมลต้องมี `name="email"` เพื่อให้ระบบรู้ว่าค่านี้คืออีเมล - ใส่ `placeholder="you@example.com"` เพื่อบอกตัวอย่างรูปแบบ - ใส่ `required` ที่ช่องสำคัญเพื่อไม่ให้ส่งฟอร์มแบบว่าง - ใช้ `checked` สำหรับ radio/checkbox ที่อยากให้ถูกเลือกเริ่มต้น - ใช้ `selected` กับ option ใน dropdown ที่ต้องการเป็นค่าเริ่มต้น
4. แนวคิดหลักที่ต้องเข้าใจ
- `name` คือชื่อ field ตอนส่งข้อมูล ถ้าไม่มี `name` ระบบจะระบุค่านั้นยาก
- `value` คือค่าจริงของ control ที่จะถูกส่งออกไป
- `placeholder` เป็นข้อความตัวอย่าง ไม่ใช่ชื่อช่อง และไม่แทน `label`
- `required` คือการบอกว่า field นี้ห้ามปล่อยว่าง
- `checked` ใช้กับ checkbox/radio ส่วน `selected` ใช้กับ option ใน select
5. การทำงานทีละขั้นตอน
- 1) กำหนด `label` และ `id` ให้ field ก่อน เพื่อให้ความหมายชัด
- 2) ใส่ `name` ให้ controls ที่ต้องส่งข้อมูลทุกตัว
- 3) กำหนด `value` ให้ตัวเลือก เช่น radio, checkbox, option
- 4) เพิ่ม `placeholder` เฉพาะจุดที่ต้องการตัวอย่างการกรอก
- 5) ใส่ `required` ในช่องที่ห้ามเว้นว่าง และทดสอบพฤติกรรมจริง
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้รวมหลาย controls และใช้ attributes หลักครบ เพื่อให้เห็นบทบาทแต่ละตัวชัดเจน
7. จุดที่ผู้เริ่มต้นมักสับสน
- ลืม `name` แล้วสงสัยว่าทำไมข้อมูลไม่ถูกส่งตาม field
- ใช้ `placeholder` แทน `label` ทำให้ความหมายของช่องหายไปเมื่อเริ่มพิมพ์
- เข้าใจว่า `required` ตรวจทุกอย่างได้ ทั้งที่หลัก ๆ คือกันค่าว่าง
- ใส่ `checked` ผิดที่กับ `<option>` ทั้งที่ควรใช้ `selected`
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| `label` vs `placeholder` | label คือชื่อช่องถาวร, placeholder คือข้อความตัวอย่างชั่วคราว | ต้องมี label เสมอ และใช้ placeholder เป็นตัวช่วยเท่านั้น |
| `value` vs `placeholder` | value คือค่าจริงของ control, placeholder ไม่ใช่ค่าที่ส่ง | ถ้าต้องการข้อมูลจริงให้ตั้ง value หรือให้ผู้ใช้กรอก |
| `checked` vs `selected` | checked ใช้กับ checkbox/radio, selected ใช้กับ option ใน select | เลือกให้ตรงชนิด control เพื่อไม่ให้พฤติกรรมผิด |
9. สรุปท้ายบทแบบจำง่าย
- `name` สำคัญที่สุดต่อการระบุข้อมูลตอนส่งฟอร์ม
- `value` คือค่าของ control ที่ระบบอ่านไปใช้งาน
- `placeholder` เป็นคำใบ้ ไม่แทน `label`
- `required` ใช้บอกว่าช่องนี้ห้ามเว้นว่าง
- `checked` และ `selected` ใช้คนละบริบท อย่าสลับกัน
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อใช้ Form Attributes ให้ถูกบทบาท และตรวจผลผ่านระบบ Playground
Lab 1 (พื้นฐาน): เพิ่ม placeholder และ required
ชื่อ Lab: ปรับช่องกรอกให้ใช้งานชัดเจน เป้าหมาย: เพิ่ม placeholder และ required ให้ช่องสำคัญ โจทย์: ใน <form id="contact-form"> ให้มี input#full-name และ input#email โดยทั้งสองช่องต้องมี placeholder และ required เงื่อนไข: ต้องคง form#contact-form และปุ่ม submit ข้อความ "ส่งฟอร์ม" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: ใส่ id ให้ครบก่อน แล้วค่อยเพิ่ม placeholder/required ให้ตรง field
Lab 2 (กลาง): เพิ่ม name/value ให้ form controls
ชื่อ Lab: ใส่ key และค่าของ controls ให้ครบ เป้าหมาย: ใช้ name และ value ถูกบทบาทกับหลาย control โจทย์: ใน <form id="signup-form"> ให้เพิ่ม name ให้ input/select/checkbox/radio และเพิ่ม value ให้ตัวเลือกที่เกี่ยวข้อง เงื่อนไข: ต้องมี radio อย่างน้อย 2 ตัวที่ใช้ name="plan" เดียวกัน และ checkbox#agree ต้องมี value="accepted" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: กำหนด name ก่อน แล้วตามด้วย value ของตัวเลือกแต่ละตัว
Lab 3 (ท้าทาย): แก้โค้ดที่ใช้ attributes ผิดบทบาท
ชื่อ Lab: แก้บทบาทของ attributes ให้ถูกต้อง เป้าหมาย: แยกบทบาท label/placeholder/name และแก้การใช้ checked/selected โจทย์: จากโค้ดตั้งต้น ให้เพิ่ม label ที่เชื่อมกับ input#username, ใส่ name ให้ field ที่ต้องส่งข้อมูล, เปลี่ยน checked ใน option เป็น selected และเติม required ให้ช่องจำเป็น เงื่อนไข: ต้องคง form#fix-attrs และปุ่ม submit ข้อความ "บันทึก" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: เรียงลำดับการแก้เป็น label+id -> name -> selected/required