เมธอด reset() ของ HTML DOM Form

เมธอด reset() ของ HTML DOM Form ใช้สำหรับรีเซ็ตค่าทั้งหมดขององค์ประกอบฟอร์มและแสดงค่าเริ่มต้นที่ระบุโดยแอตทริบิวต์ value ขององค์ประกอบฟอร์ม มันทำหน้าที่เหมือนปุ่ม reset สำหรับล้างข้อมูลฟอร์มและไม่รับพารามิเตอร์ใดๆ

ไวยากรณ์

ไวยากรณ์สำหรับเมธอด reset() ของ form:

formObject.reset()

ตัวอย่าง

มาดูตัวอย่างของเมธอด reset() ของ Form:

<!DOCTYPE html> <html> <head> <style>    form{       border:2px solid blue;       margin:2px;       padding:4px;    } </style> <script>    function ResetForm() {       document.getElementById("FORM1").reset();       document.getElementById("Sample").innerHTML="Form has been reset";    } </script> </head> <body> <h1>Form reset() method example</h1> <form id="FORM1" method="post" action="/sample_page.php"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Age <input type="text" name="Age"></label> <br><br> <input type="submit" value="SUBMIT"> <input type="button" onclick="ResetForm()" value="RESET"> </form> <p id="Sample"></p> </body> </html>

ผลลัพธ์

จะได้ผลลัพธ์ดังนี้:

เมื่อคลิกปุ่ม RESET:

ในตัวอย่างข้างต้น:

เราสร้างฟอร์มที่มี id=”FORM1” method=”post” และ action=”/sample_page.php” มีช่อง input type text สองช่อง ปุ่ม submit และปุ่ม reset:

<form id="FORM1" method="post" action="/sample_page.php"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Age <input type="text" name="Age"></label> <br><br> <input type="submit" value="SUBMIT"> <input type="button" onclick="ResetForm()" value="RESET"> </form>

ปุ่ม RESET เมื่อคลิกจะเรียกใช้ฟังก์ชัน ResetForm():

<input type="button" onclick="ResetForm()" value="RESET">

เมธอด ResetForm() ดึงองค์ประกอบ <form> โดยใช้ getElementById() ของ document และเรียกเมธอด reset() บนมัน ซึ่งล้างข้อมูลทั้งหมดในองค์ประกอบฟอร์ม สุดท้ายใช้ innerHTML แสดงข้อความสะท้อนการเปลี่ยนแปลงในย่อหน้าที่มี id “Sample”:

function ResetForm() {    document.getElementById("FORM1").reset();    document.getElementById("Sample").innerHTML="Form has been reset"; }