HTML Form - Reset (Element and Event)

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





Discover More
What are Form Control elements in HTML ?

control form elements are elements that are used specifically inside a form. They are used: to specify a key and a value. to layout the form to submit it or reset it field set [optional]...
What is an HTML Form?

form is an element that represents a user-submittable form. When parsed as HTML, a form element's start tag will imply a p element's end tag just before. The pizza order form (taken from the...



Share this page:
Follow us:
Task Runner