Teach with us

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";
}
Updated on 20-Aug-2019 06:52:49

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements