HTML
Forms
button
บทนี้สอนผู้เริ่มต้นให้เข้าใจการใช้ `button` เพื่อสั่งให้หน้าเว็บทำงานตาม action ที่ต้องการ โดยเน้น type พื้นฐาน (`submit`, `button`, `reset`) และพฤติกรรมที่เกี่ยวข้องกับฟอร์ม
1. หัวข้อนี้คืออะไร
`button` คือปุ่มที่ผู้ใช้กดเพื่อสั่งให้เกิด action บางอย่าง เช่น ส่งฟอร์ม ล้างค่า หรือเรียกการทำงานทั่วไป ในงานฟอร์ม `button` ไม่ได้มีแค่หน้าตา แต่มีพฤติกรรมที่ขึ้นกับค่า `type` ด้วย
2. ทำไมหัวข้อนี้สำคัญ
- ทำให้ผู้ใช้รู้ว่าต้องกดตรงไหนเพื่อทำงานต่อ
- ช่วยควบคุมพฤติกรรมในฟอร์มได้ตรงตามที่ต้องการ
- ลดบั๊กจากการใช้ `type` ผิด เช่น กดแล้วฟอร์มส่งโดยไม่ตั้งใจ
- ทำให้โค้ดอ่านง่ายว่าแต่ละปุ่มมีหน้าที่อะไร
3. ตัวอย่างจากชีวิตจริง
ในฟอร์มสมัครสมาชิกเรามักเจอ: - ปุ่ม "สมัครสมาชิก" เพื่อส่งฟอร์ม (`submit`) - ปุ่ม "ล้างข้อมูล" เพื่อล้างค่าที่กรอก (`reset`) - ปุ่ม "ดูตัวอย่าง" เพื่อทำงานเสริมโดยไม่ส่งฟอร์ม (`button`) การเลือก type ให้ตรงหน้าที่ช่วยให้ผู้ใช้ไม่สับสน
4. แนวคิดหลักที่ต้องเข้าใจ
- `type="submit"` ใช้ส่งข้อมูลของฟอร์ม
- `type="button"` ใช้กับ action ทั่วไปที่ไม่ควร submit ฟอร์ม
- `type="reset"` ใช้ล้างค่าฟอร์มกลับค่าเริ่มต้น
- ปุ่มใน `<form>` ที่ไม่ระบุ type อาจทำงานแบบ submit เป็นค่าเริ่มต้น
- จึงควรระบุ `type` ให้ชัดทุกครั้งเพื่อหลีกเลี่ยงพฤติกรรมไม่คาดคิด
5. การทำงานทีละขั้นตอน
- 1) กำหนดหน้าที่ของปุ่มก่อนว่าจะส่งข้อมูล ล้างค่า หรือทำงานทั่วไป
- 2) สร้าง `<button>` และระบุ `type` ให้ตรงหน้าที่
- 3) ถ้าอยู่ใน form ให้ระวังปุ่มที่ไม่ระบุ type
- 4) ตั้งข้อความบนปุ่มให้สื่อ action ชัดเจน เช่น ส่งข้อมูล, ล้างค่า
- 5) ทดสอบการกดจริงว่าแต่ละปุ่มทำงานตรงตามที่ออกแบบ
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้รวมปุ่มหลาย type ในฟอร์มเดียว เพื่อเห็นความต่างของพฤติกรรม `submit`, `button` และ `reset`
7. จุดที่ผู้เริ่มต้นมักสับสน
- ไม่ระบุ type แล้วแปลกใจว่าปุ่มไป submit ฟอร์ม
- ใช้ `type="submit"` กับปุ่มที่ควรเป็นแค่ปุ่มทั่วไป
- สับสนระหว่างปุ่ม (button) กับลิงก์ (a)
- ใส่ข้อความปุ่มไม่ชัด เช่น "ตกลง" โดยไม่บอกว่ากดแล้วเกิดอะไร
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| `button` vs `a` (link) | button ใช้สั่ง action บนหน้า, link ใช้นำทางไป URL อื่น | ถ้าคำสั่งทำงานในหน้าใช้ button, ถ้าจะย้ายหน้าใช้ link |
| `type="submit"` vs `type="button"` | submit ส่งฟอร์ม, button ไม่ส่งฟอร์มเอง | ปุ่มส่งข้อมูลใช้ submit, ปุ่มเสริมใช้ button |
| ปุ่มไม่ระบุ type vs ปุ่มระบุ type ชัดเจน | ไม่ระบุอาจเกิดพฤติกรรม default ที่ไม่ตั้งใจ | ระบุ type เสมอเพื่อควบคุมพฤติกรรมแน่นอน |
9. สรุปท้ายบทแบบจำง่าย
- `button` คือปุ่มสำหรับสั่ง action
- ในฟอร์มต้องเข้าใจ `submit`, `button`, `reset`
- `type="submit"` สำคัญเพราะเป็นตัวส่งฟอร์ม
- ไม่ระบุ type อาจได้พฤติกรรม default ที่ไม่ต้องการ
- แยกให้ชัด: ปุ่มทำงานใช้ button, นำทางใช้ link
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อใช้ปุ่มให้ตรงหน้าที่และควบคุมพฤติกรรมฟอร์มได้ถูกต้อง
Lab 1 (พื้นฐาน): เพิ่มปุ่ม submit ให้ฟอร์ม
ชื่อ Lab: ปุ่มส่งฟอร์มแรก เป้าหมาย: เพิ่มปุ่มส่งข้อมูลให้ฟอร์มทำงานครบพื้นฐาน โจทย์: ใน <form id="register-form"> ให้เพิ่มปุ่ม <button type="submit">สมัครสมาชิก</button> เงื่อนไข: ต้องมีปุ่ม submit 1 ตัวในฟอร์ม และข้อความปุ่มต้องเป็น "สมัครสมาชิก" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: ปุ่มที่ทำหน้าที่ส่งฟอร์มต้องระบุ type="submit" ชัดเจน เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 2 (กลาง): สร้างปุ่มทั่วไปที่ไม่ submit
ชื่อ Lab: ปุ่มตรวจสอบข้อมูล เป้าหมาย: สร้างปุ่มทั่วไปที่ไม่ส่งฟอร์มโดยอัตโนมัติ โจทย์: ใน <form id="profile-form"> ให้มีปุ่ม <button id="preview-btn" type="button">พรีวิว</button> และยังคงปุ่ม submit อีก 1 ตัว เงื่อนไข: ต้องมีทั้งปุ่ม type="button" และ type="submit" อย่างละ 1 ตัว สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: ปุ่ม action เสริมต้องใช้ type="button" เพื่อไม่ให้ submit ฟอร์ม เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 3 (ท้าทาย): แก้โค้ดที่ใช้ type ผิดจนฟอร์มทำงานไม่ตรง
ชื่อ Lab: แก้ปุ่มให้พฤติกรรมถูกต้อง เป้าหมาย: แก้ type ของปุ่มให้ตรงกับหน้าที่จริง โจทย์: จากโค้ดตั้งต้น ให้แก้ปุ่ม "ตรวจสอบ" เป็น type="button" และปุ่ม "ส่งแบบฟอร์ม" เป็น type="submit" เงื่อนไข: ต้องคง form#bug-form และข้อความปุ่มเดิมไว้ สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: ปุ่มที่ไม่ควรส่งฟอร์มต้องไม่ใช้ submit เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้