แอตทริบิวต์ type ของ <button>: กำหนดประเภทปุ่ม (submit, reset, button)

ไวยากรณ์ (Syntax)

<button type="button | submit | reset">

ค่าที่ใช้ได้

ตัวอย่างการใช้งาน

<!DOCTYPE html>
<html>
<body>
  <h2>ข้อมูลนักลงทุน</h2>
  <p>กรอกข้อมูลนักลงทุนที่สนใจให้ทุน:</p>
  <form action="" method="get">
    ID: <input type="number"><br>
    นักลงทุน: <input type="text"><br>
    ทุน: <input type="number"><br>
    Email: <input type="email"><br>
    DOB: <input type="date"><br><br>
    <button type="submit" value="Submit">ส่งข้อมูล</button>
    <button type="reset" value="Reset">ล้างข้อมูล</button>
  </form>
</body>
</html>

ผลลัพธ์

ฟอร์มมี 2 ปุ่ม: "ส่งข้อมูล" (submit) และ "ล้างข้อมูล" (reset) กด Reset จะคืนค่าฟอร์มเป็นค่าเริ่มต้น

ข้อควรระวังสำคัญ

• ค่าเริ่มต้นของ <button> คือ submit หากอยู่ในฟอร์มและไม่ระบุ type จะส่งฟอร์มเมื่อคลิก!
• ปุ่มที่ใช้กับ JavaScript (onclick) ควรระบุ type="button" เสมอ
• <input type="submit"> และ <button type="submit"> ทำงานเหมือนกัน แตกต่างที่ <button> ใส่ HTML ได้
• นอกฟอร์ม (<form>) แล้ว type ไม่มีผล (ทำงานเป็น button)

แนวทางปฏิบัติที่ดี

<!-- ปุ่ม JavaScript -->
<button type="button" onclick="doSomething()">ทำงาน</button>

<!-- ปุ่มส่งฟอร์ม -->
<button type="submit">บันทึก</button>

<!-- ปุ่มล้างฟอร์ม -->
<button type="reset">ล้าง</button>