About
A form is What is an HTML Form? with a reset element that creates a onreset event
By default, the reset event will reset the value to their initial state.
Articles Related
Example
With a inline handler
<form>
<input type="text" size="50" value="Change me and click the reset button" />
<input type="reset" value="Reset the form" />
</form>
Element
You can reset a form with the following elements:
Input
an input element of type reset (Ref: en-US/docs/Web/HTML/Element/input/reset).
<input type="text" size="50" value="Change me and click the reset button" />
<input type="reset" value="Send Request" accesskey="s" />
Button
You can add a reset behavior to a button element by adding a type attribute to reset (
submit works also
)
<form>
<input type="text" size=50 value="Change me and click the reset button" />
<button type="reset">Reset the value</button>
</form>
onReset event
Example with a inline event handler where we catch the onReset event:
- The handler does not change any value, the data stay the same
<form onReset='console.log("The value were reset"); '>
<input type="text" size=50 value="Change me, the reset button will reset the values" />
<button type="reset">Reset the value</button>
</form>
Prevent
As for every event, you can prevent the default event action. DOM - Event PreventDefault
Below is an example with an inline handler where you just need to return false
<form id="form" onReset='console.log("The value were not reset ;)"); return false;'>
<input id="text" type="text" size=50 value="Change me, reset will not reset" />
<button type="reset">Reset the value</button>
</form>
Reset Function
The function form.reset() resets the form.