Phương thức HTML DOM Form reset () được sử dụng để đặt lại tất cả các giá trị của các phần tử biểu mẫu và hiển thị các giá trị mặc định được chỉ định bằng cách sử dụng thuộc tính giá trị của các phần tử biểu mẫu. Nó hoạt động như một nút đặt lại để xóa dữ liệu biểu mẫu và không sử dụng bất kỳ loại tham số nào.
Cú pháp
Sau đây là cú pháp cho phương thức đặt lại biểu mẫu () -
formObject.reset()
Ví dụ
Hãy cùng chúng tôi xem xét một ví dụ về phương thức Form reset () -
<!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> Đầu ra
Điều này sẽ tạo ra kết quả sau -
Khi nhấp vào nút ĐẶT LẠI -
Trong ví dụ trên -
Đầu tiên, chúng tôi đã tạo một biểu mẫu với id =”FORM1”, method =”post” và action =”/ sample_page.php”. Nó chứa hai trường đầu vào với văn bản loại, một nút gửi và một nút đặt lại.
<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>
Nút ĐẶT LẠI khi được nhấp sẽ thực thi chức năng ResetForm ().
<input type="button" onclick="ResetForm()" value="RESET">
Phương thức ResetForm () nhận phần tử