HTML
Forms
Input Types
บทนี้สอนผู้เริ่มต้นให้เลือก `input type` ให้ตรงกับลักษณะข้อมูล เพื่อให้ฟอร์มใช้งานง่ายขึ้น ตรวจสอบข้อมูลได้ดีขึ้น และลดความผิดพลาดตั้งแต่ตอนกรอก
1. หัวข้อนี้คืออะไร
`<input>` เป็นแท็กสำหรับรับข้อมูลจากผู้ใช้ โดยสามารถกำหนด `type` ได้หลายแบบเพื่อบอกว่าเรากำลังรับข้อมูลชนิดไหน ตัวอย่างเช่น `type="text"` ใช้รับข้อความทั่วไป, `type="email"` ใช้รับอีเมล, `type="number"` ใช้รับตัวเลข และยังมี `checkbox` กับ `radio` สำหรับการเลือกคำตอบ
2. ทำไมหัวข้อนี้สำคัญ
- ผู้ใช้กรอกข้อมูลได้ง่ายขึ้น เพราะช่องข้อมูลสื่อความหมายชัดเจน
- เบราว์เซอร์ช่วยตรวจรูปแบบข้อมูลเบื้องต้นได้ตรง type มากขึ้น
- ช่วยลดความผิดพลาด เช่น ใส่อีเมลในช่องที่ควรเป็นตัวเลข
- ทำให้โค้ดฟอร์มอ่านง่ายและดูแลต่อได้ง่ายในระยะยาว
3. ตัวอย่างจากชีวิตจริง
แบบฟอร์มสมัครใช้งานมักมีข้อมูลหลายชนิดในหน้าเดียว: - ชื่อผู้ใช้ = ข้อความทั่วไป (`text`) - รหัสผ่าน = ข้อมูลลับ (`password`) - อีเมล = รูปแบบอีเมล (`email`) - อายุ = ตัวเลข (`number`) - ยอมรับเงื่อนไข = ติ๊กถูก (`checkbox`) - เลือกแพ็กเกจ = เลือกได้หนึ่งตัวเลือก (`radio`) ถ้าเลือก type ได้เหมาะสม ฟอร์มจะใช้ง่ายและลดการกรอกผิด
4. แนวคิดหลักที่ต้องเข้าใจ
- `input` ตัวเดียวกัน แต่ `type` ต่างกัน พฤติกรรมและข้อมูลที่เหมาะสมก็เปลี่ยน
- `text` เหมาะกับข้อความทั่วไปที่ไม่มีรูปแบบตายตัว
- `email` และ `number` ช่วยสื่อข้อจำกัดของข้อมูลชัดกว่าการใช้ `text`
- `checkbox` ใช้กับข้อมูลที่เลือกได้หลายข้อหรือสถานะเปิด/ปิด
- `radio` ใช้กับกลุ่มตัวเลือกที่ต้องเลือกได้เพียง 1 ข้อ โดยต้องใช้ `name` เดียวกันในกลุ่ม
5. การทำงานทีละขั้นตอน
- 1) ระบุชนิดข้อมูลก่อนว่าเป็นข้อความ อีเมล ตัวเลข หรือการเลือก
- 2) เลือก `type` ให้ตรงกับข้อมูล (`text`, `email`, `number`, ฯลฯ)
- 3) ถ้าเป็นตัวเลือกหลายข้อที่ติ๊กได้หลายค่า ใช้ `checkbox`
- 4) ถ้าเป็นตัวเลือกที่ต้องเลือกได้ค่าเดียว ใช้ `radio` และกำหนด `name` เดียวกัน
- 5) ทดสอบการกรอกจริงในเบราว์เซอร์ว่าพฤติกรรมตรงกับที่คาดหวัง
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้รวม input หลาย type ใน form เดียว เพื่อให้เห็นความต่างของการรับข้อมูลตามลักษณะข้อมูล
7. จุดที่ผู้เริ่มต้นมักสับสน
- ใช้ `text` กับทุกช่อง แม้ข้อมูลนั้นควรเป็น `email` หรือ `number`
- สลับบทบาท `checkbox` กับ `radio` ทำให้เงื่อนไขการเลือกผิด
- ลืมกำหนด `name` เดียวกันให้ radio ในกลุ่มเดียวกัน
- คิดว่า `password` เข้ารหัสข้อมูลทันที ทั้งที่จริงแค่ซ่อนการแสดงผลบนหน้าจอ
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | เลือกใช้อย่างไร |
|---|---|---|
| `text` vs `email` | text รับข้อความทั่วไป, email คาดหวังรูปแบบอีเมล | ถ้าข้อมูลต้องเป็นอีเมล ให้ใช้ email |
| `text` vs `number` | text รับได้ทุกตัวอักษร, number เน้นค่าตัวเลข | ถ้าต้องกรอกอายุ จำนวน หรือคะแนน ให้ใช้ number |
| `checkbox` vs `radio` | checkbox เลือกได้หลายข้อ/เปิดปิดสถานะ, radio เลือกได้เพียง 1 ข้อในกลุ่ม | ใช้ checkbox เมื่อเลือกหลายค่า, ใช้ radio เมื่อบังคับเลือกค่าเดียว |
9. สรุปท้ายบทแบบจำง่าย
- `input type` คือการบอกชนิดข้อมูลที่เราต้องการรับ
- เลือก type ให้ตรงข้อมูล จะทำให้ฟอร์มใช้ง่ายและผิดพลาดน้อยลง
- `checkbox` = เลือกได้หลายค่า, `radio` = เลือกได้ค่าเดียวในกลุ่ม
- อย่าใช้ `text` แทนทุกอย่าง โดยเฉพาะข้อมูลที่มีรูปแบบชัดเจน
- ก่อนส่งงานควรทดสอบพฤติกรรมจริงในเบราว์เซอร์เสมอ
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อเลือกใช้ input type ให้ตรงข้อมูลและตรวจผ่านระบบอัตโนมัติได้จริง
Lab 1 (พื้นฐาน): สร้าง text และ password input
ชื่อ Lab: ฟอร์มล็อกอินพื้นฐาน เป้าหมาย: สร้างฟอร์มที่ใช้ input type ให้ตรงกับข้อมูลล็อกอิน โจทย์: สร้าง <form id="login-form"> ที่มี input id="username" type="text" และ input id="password" type="password" พร้อมปุ่ม submit ข้อความ "เข้าสู่ระบบ" เงื่อนไข: ต้องมี input 2 ตัวใน form และ type ต้องตรงตามโจทย์ สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: ข้อความผู้ใช้ใช้ text และข้อมูลลับใช้ password เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 2 (กลาง): เพิ่ม email, number และ checkbox/radio
ชื่อ Lab: ฟอร์มสมัครใช้งานหลายประเภทข้อมูล เป้าหมาย: ใช้ input type ให้ครบทั้ง email, number, checkbox และ radio ในฟอร์มเดียว โจทย์: สร้าง <form id="signup-form"> ที่มี input#email(type=email), input#age(type=number), input#accept(type=checkbox), และ radio อย่างน้อย 2 ตัวที่ใช้ name="plan" เหมือนกัน เงื่อนไข: ต้องมีปุ่ม submit ข้อความ "สมัคร" และ radio ในกลุ่ม plan ต้องเลือกได้เพียงค่าเดียวตามพฤติกรรมมาตรฐาน สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: แยกข้อมูลเป็น 2 กลุ่ม คือข้อมูลที่กรอกค่า และข้อมูลที่เป็นตัวเลือก เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 3 (ท้าทาย): แก้โค้ดที่ใช้ input type ไม่ตรงกับข้อมูล
ชื่อ Lab: ซ่อม type ให้ตรงข้อมูลจริง เป้าหมาย: ปรับฟอร์มที่เขียนผิดให้ใช้ input type เหมาะสม โจทย์: จากโค้ดตั้งต้นใน Playground ให้แก้เป็นดังนี้: input#email ต้องเป็น type="email", input#age ต้องเป็น type="number", input#newsletter ต้องเป็น type="checkbox" และ radio สำหรับระดับสมาชิกต้องใช้ name="membership" เหมือนกัน เงื่อนไข: ต้องคง form#fix-input-types และปุ่ม submit ข้อความ "บันทึกโปรไฟล์" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: อ่านชื่อ field ก่อน แล้วจับคู่กับ type ที่สะท้อนข้อมูลจริง เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 4 (ท้าทาย): เลือก input type ให้เหมาะกับข้อมูลติดต่อ
ชื่อ Lab: จับคู่ type ให้ตรงกับข้อมูลติดต่อ เป้าหมาย: ฝึกเลือก input type ให้เหมาะกับข้อมูลที่ผู้ใช้กรอก โจทย์: จากโค้ดตั้งต้นใน Playground ให้แก้เป็นดังนี้: input#phone ต้องเป็น type="tel", input#website ต้องเป็น type="url", input#birthday ต้องเป็น type="date" เงื่อนไข: ต้องคง form#contact-info-form และปุ่ม submit ข้อความ "บันทึกข้อมูลติดต่อ" สิ่งที่ระบบควรตรวจ: selector exists, source text, attribute value และ browser runtime แนวทางการคิด: ดูความหมายของข้อมูลก่อนว่าเป็นเบอร์โทร, เว็บไซต์ หรือวันที่ แล้วเลือก type ที่ตรงที่สุด เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 5 (ท้าทาย): ซ่อมฟอร์มล็อกอินให้ใช้ type ถูกต้อง
ชื่อ Lab: ปรับ type ในฟอร์มเข้าสู่ระบบ เป้าหมาย: เข้าใจว่า field แต่ละแบบในฟอร์มล็อกอินควรใช้ input type อะไร โจทย์: จากโค้ดตั้งต้นใน Playground ให้แก้เป็นดังนี้: input#username ต้องเป็น type="text", input#password ต้องเป็น type="password", input#remember ต้องเป็น type="checkbox" เงื่อนไข: ต้องคง form#login-form, ต้องมีปุ่ม submit ข้อความ "เข้าสู่ระบบ" และ checkbox ต้องมี id="remember" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: ข้อมูลที่ต้องซ่อนควรใช้ password ส่วนตัวเลือกเปิด/ปิดใช้ checkbox เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 6 (ท้าทาย): แก้ฟอร์มสมัครคอร์สให้เลือก type ตามข้อมูล
ชื่อ Lab: เลือก type ให้ตรงกับข้อมูลการสมัคร เป้าหมาย: ฝึกวิเคราะห์ว่าข้อมูลแต่ละชนิดควรใช้ input แบบไหน โจทย์: จากโค้ดตั้งต้นใน Playground ให้แก้เป็นดังนี้: input#students ต้องเป็น type="number", input#start-date ต้องเป็น type="date", input#certificate ต้องเป็น type="checkbox" และ radio สำหรับช่วงเวลาเรียนต้องใช้ name="schedule" เหมือนกัน เงื่อนไข: ต้องคง form#course-signup และปุ่ม submit ข้อความ "สมัครคอร์ส" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value และ browser runtime แนวทางการคิด: จำนวนใช้ number, วันใช้ date, ตัวเลือกเปิด/ปิดใช้ checkbox และตัวเลือกที่เลือกได้เพียงหนึ่งข้อควรอยู่ใน radio group เดียวกัน เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้