Reset an HTML form
It’s as simple as this:
<form ... > ... fields ... <input type="reset" value="Reset the form"> </form>
The value="…" is optional and without it the text on the button will default to "reset" or similar.
What does it actually do?
Clicking the reset button restores the form to its original state (the default value) before the user started entering values into the fields, selecting radio buttons, checkboxes etc.
So if the following field was in the form:
<input type="text" value="foo bar baz">
and the user typed in "apple orange banana pear", clicking the reset button will restore the value of the input to "foo bar baz". It does not clear it to an empty state.
How to clear all fields to an empty state
You could, but in most cases you don’t need to and should just use a regular reset button instead. You can call the form’s reset function in one of the following ways where ‘formname’ is the name of the form or ‘formID’ is the ID of the form:
or with jQuery like so: