HTML Form - Reset (Element and Event)

1 - About

A form is HTML - Form element with a reset element that creates a onreset event

By default, the reset event will reset the value to their initial state.

3 - 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>

4 - Element

You can reset a form with the following elements:

4.1 - Input

an input element of type reset (Ref: input/reset).


<input type="text" size="50" value="Change me and click the reset button" />
<input type="reset"  value="Send Request" accesskey="s" />

4.2 - 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>

5 - 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>

5.1 - 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>

6 - Reset Function

The function form.reset() resets the form.

7 - Documentation / Reference


Data Science
Data Analysis
Statistics
Data Science
Linear Algebra Mathematics
Trigonometry

Powered by ComboStrap