Let's look at a function we used to have a lot but somehow seems a bit faded for no good reason!
The form reset option was usually a button at the bottom of your form, to reset the whole input.
I work for a company that uses a lot of pre-population based on cookies, but sometimes this information is not what you want in the inputs so people can reset the whole form.
HTML Reset Method
One method to reset a form a just by using the reset
input type and your HTML
would look like this;
<form>
<input type="text" />
<br /><br />
<input type="text" />
<br /><br />
<input type="text" />
<br /><br />
<input type="reset" />
</form>
Try and type something in the fields and press the reset button, this will reset the whole form.
JavaScript Reset Method
Another way to do this is with JavaScript
, for instance, after a submit.
Let's add the following button:
<button type="button" onclick="myReset()">JavaScript</button>
function myReset() {
var form = document.querySelector('form');
form.reset();
}
Alternatively even easier we can use the following action:
<button type="button" onclick="reset()">JavaScript #2</button>
View these methods on Codepen.
See the Pen Resetting a Form by Chris Bongers (@rebelchris) on CodePen.
Thank you for reading, and let's connect!
Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter