What is the difference between clearing and reseting a web form?

Question

I want to reset the value of a web page using JavaScript reset() function. Which operation is the JavaScript performing first: the reset or a clear? And what is the difference in between the two?

Also, how can I retrieve a value using reset function?

Answer 1

Clear vs. Reset

Clearing a form makes all input fields blank, unchecks checkboxes, deselects multi-select choices, and so forth; whereas, resetting a form reverts all changes.

For example:

<input type="text" name="name" value="Timothy" />
<input type="reset" value="Reset" />

This produces an input field with a value of Timothy. Let's say the user then changes the value to Berners-Lee. If the user clicks the Reset button, the value of Berners-Lee will revert (reset) to Timothy.

Clearing the fields would involve changing the value attribute of the input field to the empty string, as follows:

<input type="text" name="name" value="" />

You can change the value attribute using JavaScript.

Retrieve Value

If you want to get (or set) the value for a field, using JavaScript, try reading these:

• http://www.irt.org/script/162.htm
• http://www.javascript-coder.com/javascript-form/javascript-get-form.htm
• http://www.quirksmode.org/js/forms.html

Answer 2

The reset function does the same as if you had an input type="reset" in the form and clicked it.

It will reset the values in all fields in the form to the value they had when the page loaded.

If you have a textbox like this:

<input type="text" name="info" value="Hejsan" />

calling the reset function will put the value "Hejsan" back in the textbox.

If you haven't specified a value (or not selected an option in a select field), it's reset to an empty value (or for a select field the first option).

The reset function can't be used to retrieve any values.

Answer 3

Edit: I modified my original answer to this thanks to Dave's comment. It looks like he also posted an answer while I modified my answer so he deserves the "accepted" answer.

Resetting a form resets the original values of all fields in a form. If there was no value it will clear the field, if there was a value it will "reset" the field back to that value.

When you clear a form, you would essentially by removing ALL values from the form. There is no "clear form" function in JavaScript, so you would have to go through each field and clear them manually.

So to answer your question, you just want to "reset" the form using the reset() function, not clear the form.