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 html
input fields
1 2 |
const registrationForm = document.getElementById("registrationForm"); registrationForm.reset(); |