Web/HTML/Element/input/reset

From Get docs
< Web/HTML‎ | Element‎ | input


<input> elements of type reset are rendered as buttons, with a default click event handler that resets all of the inputs in the form to their initial values.


You should usually avoid including reset buttons in your forms. They're rarely useful, and are instead more likely to frustrate users who click them by mistake (often while trying to click the submit button).


Value A DOMString used as the button's label
Events click
Supported common attributes type and value
IDL attributes value
Methods None

Value

An <input type="reset"> element's value attribute contains a DOMString that is used as the button's label. Buttons such as reset don't have a value otherwise.

<input type="reset" value="Reset the form">

If you don't specify a value, you get an button with the default label (typically "Reset," but this will vary depending on the user agent):

<input type="reset">

Using reset buttons

<input type="reset"> buttons are used to reset forms. If you want to create a custom button and then customize the behaviour using JavaScript, you need to use <input type="button">, or better still, a <button> element.

A simple reset button

We'll begin by creating a simple reset button:

<form> 
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text">
  </div>
  <div>
    <input type="reset" value="Reset the form">
  </div>
</form>

This renders like so:

Try entering some text into the text field, and then pressing the reset button.

Adding a reset keyboard shortcut

To add a keyboard shortcut to a reset button — just as you would with any <input> for which it makes sense — you use the accesskey global attribute.

In this example, r is specified as the access key (you'll need to press r plus the particular modifier keys for your browser/OS combination; see accesskey for a useful list of those).

<form>
  <div>
    <label for="example">Type in some sample text</label>
    <input id="example" type="text">
  </div>
  <div>
    <input type="reset" value="Reset the form"
     accesskey="r">
  </div>
</form>

The problem with the above example is that there's no way for the user to know what the access key is! This is especially true since the modifiers are typically non-standard to avoid conflicts. When building a site, be sure to provide this information in a way that doesn't interfere with the site design (for example by providing an easily accessible link that points to information on what the site access keys are). Adding a tooltip to the button (using the title attribute) can also help, although it's not a complete solution for accessibility purposes.

Disabling and enabling a reset button

To disable a reset button, simply specify the disabled global attribute on it, like so:

<input type="reset" value="Disabled" disabled>

You can enable and disable buttons at run time by simply setting disabled to true or false; in JavaScript this looks like btn.disabled = true or btn.disabled = false.

Note: See the <input type="button"> page for more ideas about enabling and disabling buttons.


Validation

Buttons don't participate in constraint validation; they have no real value to be constrained.

Examples

We've included simple examples above. There isn't really anything more to say about reset buttons. 

Specifications

Specification Status
HTML Living StandardThe definition of '<input type="reset">' in that specification. Living Standard
HTML5The definition of '<input type="reset">' in that specification. Recommendation

Browser compatibility

Update compatibility data on GitHub

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
type="reset" Chrome

Full support 1

Edge

Full support 12

Firefox Full support 1

Notes'

Full support 1

Notes'

Notes' Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.

IE

Full support Yes

Opera

Full support Yes

Safari

Full support 1

WebView Android

Full support Yes

Chrome Android

Full support Yes

Firefox Android Full support 4

Notes'

Full support 4

Notes'

Notes' Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.

Opera Android

Full support Yes

Safari iOS

Full support Yes

Samsung Internet Android

Full support Yes

Legend

Full support  
Full support
See implementation notes.'
See implementation notes.


See also