ฉันมักเห็นเว็บไซต์ที่ใช้ปุ่มและลิงก์ (แองคอร์เอลิเมนต์ <a>) สลับกันใช้ แต่ไม่ได้ยากที่จะทำให้ถูกต้อง นี่คือแนวทางพื้นฐาน:
เมื่อไหร่ควรใช้ลิงก์ (<a>)
ใช้ลิงก์ (<a href="/go-here">link</a>) หากคุณต้องการให้ผู้ใช้:
- ไปยังส่วนอื่นบนหน้าเดียวกัน
- ไปยังหน้าอื่นบนเว็บไซต์ของคุณ
- ไปยังเว็บไซต์ภายนอก (โดเมนอื่น)
เมื่อไหร่ควรใช้ปุ่ม (<button>)
ใช้ ปุ่ม (<button type="button">button</button>) หากคุณต้องการให้การคลิกทริกเกอร์การกระทำที่ขับเคลื่อนด้วย JavaScript: เช่น:
- สลับเมนูสไลด์อิน
- เปิดป๊อปอัปโมดัล/โดเดอร์
ตัวอย่างที่สมบูรณ์แบบของเมื่อควรใช้ <button> คือไอคอน Moon/Sun ในเฮดเดอร์บนเว็บไซต์นี้ เมื่อคุณคลิก มันจะสลับธีมสีจากสว่างเป็นมืด
ฟอร์มอินพุต呢?
หากผู้ใช้ควรส่งฟอร์ม เช่น ฟอร์มติดต่อ ให้ใช้เอลิเมนต์อินพุตประเภท submit:
<input type="submit" value="Submit" />