HTML
Accessibility
Button vs Link
บทนี้สอนผู้เริ่มต้นให้แยกบทบาทของ `a` กับ `button` ให้ถูกต้อง โดยเน้นว่าความต่างอยู่ที่หน้าที่หลังคลิก ไม่ใช่หน้าตา เพื่อให้หน้าเว็บใช้งานง่าย เข้าใจง่าย และเข้าถึงได้ดีขึ้น
1. หัวข้อนี้คืออะไร
Button vs Link คือการเลือกใช้ element ให้ตรงกับสิ่งที่ต้องการให้เกิดหลังผู้ใช้คลิก `a` หรือ link ใช้พาผู้ใช้ไปที่อื่น เช่น ไปหน้าใหม่ ไปส่วนอื่นของหน้า หรือไปเว็บไซต์อื่น ส่วน `button` ใช้สำหรับทำ action ในหน้าปัจจุบัน เช่น ส่งฟอร์ม เปิด modal หรือสลับสถานะบางอย่าง ดังนั้นความต่างสำคัญอยู่ที่หน้าที่ ไม่ใช่หน้าตา
2. ทำไมหัวข้อนี้สำคัญ
- ช่วยให้ผู้ใช้เข้าใจได้ทันทีว่าคลิกแล้วจะเกิดอะไรขึ้น
- ลดความสับสนจากการใช้ element ผิดบทบาท เช่น ปุ่มที่จริง ๆ พาไปอีกหน้า หรือ link ที่จริง ๆ ทำ action ในหน้า
- ทำให้โค้ดสื่อความหมายตรงกับพฤติกรรมจริงของหน้าเว็บ
- ช่วยเรื่อง accessibility เพราะ element แต่ละชนิดถูกออกแบบมาสำหรับหน้าที่ต่างกัน
3. ตัวอย่างจากชีวิตจริง
ตัวอย่างที่เจอบ่อย: - ปุ่มส่งฟอร์มสมัครสมาชิกควรเป็น `button type="submit"` - ลิงก์ไปหน้ารายละเอียดคอร์สควรเป็น `<a>` - ปุ่มเปิดแถบตัวกรองหรือ modal ควรเป็น `button` - ลิงก์อ่านบทความต่อควรเป็น `<a>` ถ้าเราเลือก element ตรงกับ use case ผู้ใช้จะคาดเดาพฤติกรรมได้ง่ายขึ้นและใช้งานเว็บได้มั่นใจกว่าเดิม
4. แนวคิดหลักที่ต้องเข้าใจ
- `a` ใช้สำหรับ navigation หรือการพาผู้ใช้ไปที่อื่น เช่น หน้าใหม่ เว็บไซต์อื่น หรือ section อื่นในหน้า
- `button` ใช้สำหรับ actions ในหน้าปัจจุบัน เช่น เปิดตัวอย่าง toggle สถานะ หรือสั่งให้บางอย่างทำงาน
- `button type="submit"` เป็นกรณีพิเศษของ button ที่ใช้ส่งฟอร์ม
- หน้าตาของ `a` และ `button` อาจแต่งให้คล้ายกันได้ แต่หน้าที่ห้ามสลับกัน
- ไม่ควรใช้ button แทน link หรือใช้ link แทน button เพียงเพราะแต่ง style ให้เหมือนกันได้
- การตัดสินใจควรดูผลลัพธ์หลังคลิกว่าเป็นการนำทางหรือเป็น action ในหน้า ไม่ใช่ดูจาก design อย่างเดียว
5. การทำงานทีละขั้นตอน
- 1) ถามก่อนว่าคลิกแล้วผู้ใช้จะไปที่อื่น หรือจะทำอะไรในหน้าปัจจุบัน
- 2) ถ้าไปที่อื่นให้ใช้ `a` พร้อม `href` ที่ชัดเจน
- 3) ถ้าทำ action ในหน้าให้ใช้ `button`
- 4) ถ้าเป็นการส่งฟอร์มให้ใช้ `button type="submit"`
- 5) ตรวจข้อความบน element ให้บอกชัดว่าคลิกแล้วจะเกิดอะไรขึ้น
6. ตัวอย่างเชิงเทคนิค / โค้ด
ตัวอย่างนี้รวมทั้งการใช้ถูกบริบทและใช้ผิดบริบท เพื่อให้เห็นชัดว่าการเลือก element ควรดูจากหน้าที่หลังคลิก ไม่ใช่ดูจากหน้าตาอย่างเดียว
7. จุดที่ผู้เริ่มต้นมักสับสน
- เลือก element จากหน้าตาแทนที่จะเลือกจากหน้าที่จริงหลังคลิก
- ใช้ `<a href="#">` เพื่อทำ action ในหน้า ทั้งที่จริงควรใช้ button
- ใช้ button เพื่อพาไปหน้าอื่น ทั้งที่จริงควรใช้ link
- สับสนระหว่าง `button type="button"` กับ `button type="submit"` ในฟอร์ม
8. เปรียบเทียบกับสิ่งที่ใกล้เคียง
| คู่เปรียบเทียบ | ความต่าง | ใช้เมื่อไร |
|---|---|---|
| link (`a`) vs button | link ใช้พาไปที่อื่น ส่วน button ใช้ทำ action ในหน้าปัจจุบัน | ถ้าคลิกแล้วเปลี่ยนปลายทางให้ใช้ a ถ้าคลิกแล้วสั่งงานในหน้าให้ใช้ button |
| นำทางไปหน้าอื่น vs action ในหน้าปัจจุบัน | การนำทางคือเปลี่ยนตำแหน่งหรือปลายทาง ส่วน action คือสั่งให้บางอย่างทำงานในหน้าปัจจุบัน | ดูผลลัพธ์หลังคลิกเป็นหลักก่อนเลือก element |
| `button type="button"` vs `button type="submit"` | button ใช้กับ action ทั่วไปในหน้า ส่วน submit ใช้ส่งฟอร์ม | ถ้าไม่ได้ตั้งใจส่งฟอร์ม อย่าใช้ submit โดยไม่จำเป็น |
| ใช้ element ถูกบริบท vs ใช้ผิดบริบท | ใช้ถูกบริบททำให้เว็บอ่านง่ายและผู้ใช้คาดเดาได้ ส่วนใช้ผิดบริบททำให้สับสนและโค้ดสื่อความหมายผิด | เลือกจากหน้าที่ ไม่ใช่จาก style |
9. สรุปท้ายบทแบบจำง่าย
- `a` ใช้พาไปที่อื่น
- `button` ใช้ทำ action ในหน้าปัจจุบัน
- ส่งฟอร์มใช้ `button type="submit"`
- หน้าตาคล้ายกันได้ แต่หน้าที่ห้ามสลับกัน
10. Lab สำหรับ Playground
ฝึก 3 ระดับเพื่อเลือกใช้ link หรือ button ให้ตรงหน้าที่ ตั้งแต่กรณีพื้นฐาน ไปจนถึงการแก้ตัวอย่างที่สลับบทบาทผิดและการวิเคราะห์ use case จริง
Lab 1 (พื้นฐาน): เลือกใช้ link หรือ button ให้ถูก
ชื่อ Lab: แยกนำทางกับ action เป้าหมาย: ใช้ link สำหรับนำทาง และใช้ button สำหรับ action ในหน้า โจทย์: สร้าง <a id="course-link" href="/learn/html">ไปบทเรียน HTML</a> และ <button id="preview-button" type="button">เปิดตัวอย่าง</button> เงื่อนไข: ต้องมี a 1 ตัวและ button 1 ตัว โดย link ต้องมี href ตรงตามโจทย์ และ button ต้องเป็น type="button" สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: ถ้าพาไปหน้าอื่นใช้ a ถ้าเป็น action ในหน้าใช้ button เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 2 (กลาง): แก้ตัวอย่างที่สลับบทบาทผิด
ชื่อ Lab: แก้ element ให้ตรงหน้าที่ เป้าหมาย: แก้ตัวอย่างที่ใช้ link และ button สลับบทบาทกัน โจทย์: จาก starter code ให้แก้ "เปิดตัวกรอง" ให้เป็น <button id="filter-button" type="button">เปิดตัวกรอง</button> และแก้ "ไปหน้าคอร์ส" ให้เป็น <a id="next-course-link" href="/learn/css">ไปหน้าคอร์ส</a> เงื่อนไข: ต้องไม่มี a#filter-button และต้องไม่มี button#next-course-link เหลืออยู่ สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: ถ้าเป็น action ในหน้าใช้ button ถ้าเป็นการนำทางใช้ a เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้
Lab 3 (ท้าทาย): วิเคราะห์ use case แล้วเขียนโค้ดที่เหมาะสม
ชื่อ Lab: เลือก element จากผลลัพธ์หลังคลิก เป้าหมาย: วิเคราะห์ use case แล้วเลือกใช้ a หรือ button ให้ถูกต้อง โจทย์: สร้าง 2 element ตามนี้ - ลิงก์ <a id="article-link" href="/articles/html-basics">อ่านบทความ HTML</a> - ปุ่ม <button id="toggle-button" type="button">สลับรายละเอียด</button> เงื่อนไข: ต้องมี a 1 ตัวและ button 1 ตัว โดยแต่ละตัวต้องตรงกับ use case ที่กำหนด สิ่งที่ระบบควรตรวจ: selector exists, selector count, source text, attribute value, text content และ browser runtime แนวทางการคิด: กรณีอ่านบทความคือ navigation ส่วนสลับรายละเอียดคือ action ในหน้า เฉลยตัวอย่าง: ดูในส่วนเฉลยของ Lab นี้