Mission 6: Button

เป้าหมายของ Mission นี้: เพิ่ม <button> และเข้าใจว่าทำไมควรใช้ button แทน div/span เวลาต้องการปุ่มกด

Button Tag

<button> คือ element สำหรับปุ่มกดโดยเฉพาะ มาพร้อม keyboard accessibility (กด Tab แล้ว Enter ใช้งานได้ทันที) ต่างจาก <div onClick={...}> ที่ต้องเขียน โค้ดเพิ่มเองให้รองรับคีย์บอร์ด

ทำไมไม่ใช้ div แทน

<div> ไม่ใช่ interactive element โดยธรรมชาติ — ถ้าจะทำให้กดได้ต้องเขียนโค้ด เพิ่มเยอะกว่าการใช้ <button> ตรงๆ ซึ่งได้ accessibility มาฟรีอยู่แล้ว

Demo

<button>ติดต่อ</button>