Welcome folks today in this blog post we will be looking to reset a HTML5 Form in Javascript. I will show a complete example with full source code
Using Reset Attribute in HTML5 Form
In the first example we will use the reset attribute to reset the html5 form as shown below
|
1 |
<input type="reset" value="Reset" /> |
In the above code you can see we are using the type attribute as reset to actually the reset or clear out the html contents of the input fields
Now we can integrate this reset button with a html5 form as shown below in this code
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>How to Reset HTML5 Form in Javascript</title> </head> <body> <form method="post"> <input type="text" name="" id=""> <input type="submit" value="Register"/> <input type="reset" value="Reset" /> </form> </body> <script src="script.js"></script> </html> |
Now inside the javascript code we will be using the reset() method to clear out the htmlinput fields
|
1 2 |
const registrationForm = document.getElementById("registrationForm"); registrationForm.reset(); |
