คุณสมบัติ type ของ Button
คุณสมบัติ type ที่เกี่ยวข้องกับอิลิเมนต์ HTML <button> อิลิเมนต์ button มี type เริ่มต้นเป็น "submit" หมายความว่าการคลิกปุ่มในฟอร์มจะส่งฟอร์ม (submit) คุณสมบัติ type ใช้ตั้งค่าหรือคืนค่าประเภทของปุ่ม
ไวยากรณ์ (Syntax)
การกำหนดค่า type
buttonObject.type = "submit|button|reset"
ค่าที่เป็นไปได้:
- submit - ปุ่มส่งฟอร์ม (ค่าเริ่มต้น)
- button - ปุ่มทั่วไป ไม่มีพฤติกรรมเริ่มต้น
- reset - ปุ่มรีเซ็ตข้อมูลฟอร์ม
ตัวอย่างการใช้งาน
ตัวอย่างด้านล่างแสดงการเปลี่ยนปุ่มจาก submit เป็น reset
<!DOCTYPE html>
<html>
<body>
<form id="Form1" action="/sample.php">
<label>First Name: <input type="text" name="fname"><br><br></label>
<label>Surname: <input type="text" name="lname"><br><br></label>
<button id="Button1" type="submit">Submit</button>
</form>
<p>Click the below button below to change the type of the above button from "submit" to "reset".</p>
<button onclick="changeType()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeType() {
document.getElementById("Button1").type = "reset";
document.getElementById("Sample").innerHTML = "The Submit button is now a reset button";
}
</script>
</body>
</html>
ผลลัพธ์
เริ่มต้น: ฟอร์มมี 2 ช่องกรอก และปุ่ม Submit
กรอกข้อมูล แล้วคลิก CHANGE: ปุ่มเปลี่ยนเป็น Reset (ข้อความยังคงเป็น "Submit")
คลิกปุ่ม Submit (ตอนนี้เป็น Reset): ฟอร์มถูกล้างข้อมูล
คำอธิบายเพิ่มเติม
- สำคัญ: ปุ่มใน
<form>ที่ไม่ระบุ type จะเป็นtype="submit"อัตโนมัติ - ปุ่มนอกฟอร์ม หรือปุ่มที่มี
type="button"ไม่ submit ฟอร์ม - ควรระบุ
type="button"สำหรับปุ่มที่ใช้ JavaScript เพื่อป้องกันการ submit โดยไม่ตั้งใจ type="reset"จะล้างค่า input ทั้งหมดในฟอร์มกลับเป็นค่าเริ่มต้น- สามารถเปลี่ยน type แบบไดนามิกได้ แต่มักทำใน HTML โดยตรง
