Resetting an HTML form with a reset input button

This post covers the HTML reset input button. I know this is very basic HTML but after some recent responses to my "clear a form with jQuery" post I’m beginning to think a lot of web developers must not know how to do a reset with regular old HTML and seem to think you need to use Javascript.

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

Unfortunately you can’t clear all the fields to an empty state with regular HTML and need to use Javascript instead, which was the post I mentioned in the opening paragraph. I have previously covered how to do this with regular Javascript and also with jQuery.

How to reset the form with Javascript

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:

document.forms['formname'].reset();

document.formname.reset();

document.getElementById('formID').reset();

or with jQuery like so:

$('#formID').get(0).reset();

$('form[name=formname]').get(0).reset();