Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Form reset() method
The HTML DOM Form reset() method is used for resetting all the values of the form elements and displaying the default values that are specified using the value attribute of the form elements. It acts as a reset button to clear form data and it doesn’t take any kind of parameters.
Syntax
Following is the syntax for form reset() method −
formObject.reset()
Example
Let us look at an example of the Form reset() method −
<!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>
Output
This will produce the following output −
On clicking the RESET button −
In the above example −
We have first created a form with id=”FORM1”, method=”post” and action=”/sample_page.php”. It contains two input fields with type text, a submit button and a reset button.
<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>
The RESET button on being clicked executes the ResetForm() function.
<input type="button" onclick="ResetForm()" value="RESET">
The ResetForm() method gets the <form> element using the document object getElementById() method and calls the reset() method on it. This clears all the data in the form elements. Finally using the innerHTML property we display the intended text reflecting this change inside a paragraph with id “Sample” −
function ResetForm() {
document.getElementById("FORM1").reset();
document.getElementById("Sample").innerHTML="Form has been reset";
}
1K+ Views
