คุณสมบัติประเภทปุ่ม HTML DOM เชื่อมโยงกับองค์ประกอบ HTML องค์ประกอบปุ่มโดยค่าเริ่มต้นมี type=”submit” เช่นการคลิกปุ่มใด ๆ บนแบบฟอร์มจะเป็นการส่งแบบฟอร์ม คุณสมบัติประเภทปุ่มตั้งค่าหรือส่งคืนประเภทของปุ่ม ไวยากรณ์ ต่อไปนี้เป็นไวยากรณ์สำหรับ − การตั้งค่าคุณสมบัติประเภทปุ่ม - buttonObject.type = "submit|button|reset" ในที่นี้ การส่ง|ปุ่ม|รีเซ็ตเป็นค่าประเภทปุ่ม การส่งถูกกำหนดโดยค่าเริ่มต้น ส่ง − ทำให้ปุ่มเป็นปุ่มส่ง ปุ่ม − ทำให้ปุ่มคลิกได้ปกติ รีเซ็ต - สร้างปุ่มรีเซ็ตที่รีเซ็ตข้อมูลแบบฟอร์ม ตัวอย่าง ให้เราดูตัวอย่างของคุณสมบัติประเภทปุ่ม HTML DOM - <!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> ผลลัพธ์ สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ - เมื่อกรอกรายละเอียดแล้วคลิกเปลี่ยน - ตอนนี้คลิกที่ส่ง (ซึ่งขณะนี้ถูกรีเซ็ต) - ในตัวอย่างข้างต้น − ขั้นแรกเราได้สร้างฟิลด์ข้อความสองฟิลด์และปุ่มที่มีประเภท "ส่ง" ที่จะส่งข้อมูลของเรา - <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> เราได้สร้างปุ่ม CHANGE ที่จะรันเมธอด changeType() เมื่อคลิก - <button onclick="changeType()">CHANGE</button> เมธอด changeType() รับองค์ประกอบปุ่มโดยใช้ id และตั้งค่าประเภทเพื่อรีเซ็ต จากนั้นข้อความเกี่ยวกับการเปลี่ยนแปลงจะแสดงในย่อหน้าด้วยตัวอย่าง "Id" ตอนนี้เมื่อคุณคลิกที่ปุ่มส่ง มันจะรีเซ็ตเช่นล้างข้อมูลแบบฟอร์มแทนที่จะส่ง - function changeType() { document.getElementById("Button1").type = "reset"; document.getElementById("Sample").innerHTML = "The Submit button is now a reset button"; }