แท็ก <button> ใน HTML คืออะไร?
แท็ก <button> ใช้สร้าง ปุ่มที่คลิกได้ (Clickable Button) ในหน้าเว็บ แตกต่างจาก <input type="button"> ที่ <button> สามารถใส่เนื้อหาได้หลากหลาย เช่น รูปภาพ ไอคอน HTML หรือข้อความที่จัดรูปแบบได้
แอตทริบิวต์หลักของ <button>
| แอตทริบิวต์ | ค่า | คำอธิบาย |
|---|---|---|
| autofocus | autofocus | โฟกัสที่ปุ่มเมื่อโหลดหน้าเว็บ |
| disabled | disabled | ปิดใช้งานปุ่ม |
| form | form_id | ระบุฟอร์มที่ปุ่มเป็นส่วนหนึ่ง |
| formaction | URL | สำหรับ type="submit" ส่งข้อมูลไป URL นี้ |
| formenctype | MIME type | เข้ารหัสข้อมูลฟอร์มก่อนส่ง |
| formmethod | get/post | วิธีส่งข้อมูลฟอร์ม |
| formnovalidate | formnovalidate | ไม่ตรวจสอบความถูกต้องข้อมูล |
| formtarget | _blank/_self/_parent/_top | เป้าหมายการแสดงผลหลังส่งฟอร์ม |
| name | name | ชื่อของปุ่ม |
| type | button/submit/reset | ประเภทปุ่ม (ค่าเริ่มต้นคือ submit) |
| value | text | ค่าเริ่มต้นของปุ่ม |
ตัวอย่างการใช้งาน
<!DOCTYPE html> <html> <body> <h2>ตัวอย่างปุ่ม</h2> <p>ข้อความตัวอย่างด้านล่าง:</p> <textarea rows="4" cols="50"> เรากำลังเรียนรู้แนวคิด อิลิเมนต์ และแอตทริบิวต์ใน HTML! </textarea><br> <button type="button" disabled>Previous</button> <button type="button">Next</button> </body> </html>
ผลลัพธ์
จะแสดงปุ่ม 2 ปุ่ม: ปุ่ม "Previous" สีจาง (disabled) และปุ่ม "Next" พร้อมใช้งาน
ข้อดีของ <button> เทียบ <input type="submit">
- ใส่รูปภาพ ไอคอน หรือ HTML ได้ภายในปุ่ม
- จัดรูปแบบด้วย CSS ยืดหยุ่นกว่า
