Table of Contents

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.

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.

Documentation / Reference