บทนำ
ทั้งสองสร้างปุ่มได้ แต่มีความแตกต่างสำคัญในเรื่องเนื้อหาและการจัดรูปแบบ
แท็ก <button>
- เป็น Container - ใส่เนื้อหาได้: ข้อความ, รูปภาพ, ไอคอน, HTML อื่นๆ
- จัดสไตล์ด้วย CSS ได้ยืดหยุ่นกว่า
- ค่าเริ่มต้น
type="submit"(ในฟอร์ม)
ตัวอย่างใส่รูปภาพในปุ่ม
<!DOCTYPE html>
<html>
<body>
<button onclick="alert('Learn HTML')">
<img src="logo.jpg" alt="Learn HTML" height="80" width="100">
</button>
</body>
</html>
แท็ก <input type="button">
- เป็น Void Element - ไม่มีเนื้อหาภายใน
- ข้อความแสดงผ่านแอตทริบิวต์
valueเท่านั้น - ไม่สามารถใส่รูปภาพ/HTML ได้
- จัดสไตล์ยากกว่า (ไม่มี pseudo-elements ::before ::after)
ตัวอย่าง
<input type="button" value="Click Me" onclick="alert('Hello')">
ตารางเปรียบเทียบ
| คุณสมบัติ | <button> | <input type="button"> |
|---|---|---|
| เนื้อหาภายใน | ได้ (HTML, Text, Image) | ไม่ได้ (แค่ value) |
| Pseudo-elements | รองรับ | ไม่รองรับ |
| Accessibility | ดีกว่า (screen reader อ่านเนื้อหา) | พอใช้ |
| Type ค่าเริ่มต้น | submit | button |
| รองรับ formenctype, formmethod, formtarget | รองรับ | รองรับ |
แนะนำ
ใช้ <button> สำหรับปุ่มในฟอร์มและ UI ทั่วไป ใช้ <input type="button"> เฉพาะกรณีต้องการความเข้ากันได้กับระบบเก่าๆ
