User ID:
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</form>
:::
:::
::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”}
::: {#css-editor}
.controls {
padding-top: 1rem;
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: 1fr 2fr;
gap: 0.7rem;
}
label {
font-size: 0.8rem;
justify-self: end;
}
input[type='reset'],
input[type='submit'] {
width: 5rem;
justify-self: end;
}
input[type='reset'] {
grid-column: 2;
grid-row: 2;
}
input[type='submit'] {
grid-column: 2;
grid-row: 3;
}
:::
:::
::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”}
::: {#js-editor}
:::
:::
:::
::: {#output .output-container}
Output
# :::
:::
::: {.section .console-container .hidden aria-hidden=“true”}
Console Output
# ![]
clear console
::: {#console .console}
:::
:::
::: {#html-output .output .editor-tabbed}
%html-content%
:::
:::
::: {#sect1 .notecard .note}
Note: 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
# ::: section-content
An <input type="reset"> element's
valuereset don't have a value otherwise.
:::
Setting the value attribute
# ::: section-content
::: code-example
[html]{.language-name}
<input type="reset" value="Reset the form" />
:::
::: {#sect2 .code-example}
::: iframe
:::
:::
:::
Omitting the value attribute
# ::: section-content
If you don't specify a value, you get a button with the default label
(typically "Reset," but this will vary depending on the
user
agent ):
::: code-example
[html]{.language-name}
<input type="reset" />
:::
::: {#sect3 .code-example}
::: iframe
:::
:::
:::
::: section-content
<input type="reset"> buttons are used to reset forms. If you want to
create a custom button and then customize the behavior using JavaScript,
you need to use
<input type="button"><button>
::: section-content
We'll begin by creating a simple reset button:
::: code-example
[html]{.language-name}
<form>
<label for="example">Type in some sample text</label>
<input id="example" type="text" />
<input type="reset" value="Reset the form" />
</form>
:::
This renders like so:
::: {#sect4 .code-example}
::: iframe
:::
:::
Try entering some text into the text field, and then pressing the reset
button.
:::
Adding a reset keyboard shortcut
# ::: section-content
To add a keyboard shortcut to a reset button — just as you would with
any
<input>accesskey
In this example, [r]{.kbd} is specified as the access key (you'll need
to press [r]{.kbd} plus the particular modifier keys for your browser/OS
combination; see
accesskey
::: code-example
[html]{.language-name}
<form>
<label for="example">Type in some sample text</label>
<input id="example" type="text" />
<input type="reset" value="Reset the form" accesskey="r" />
</form>
:::
::: {#sect5 .code-example}
::: iframe
:::
:::
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
::: section-content
To disable a reset button, specify the
disabled
::: code-example
[html]{.language-name}
<input type="reset" value="Disabled" disabled />
:::
You can enable and disable buttons at run time by setting disabled to
true or false; in JavaScript this looks like btn.disabled = true
or btn.disabled = false.
::: {#sect6 .notecard .note}
Note: See the
<input type="button">
Validation
# ::: section-content
Buttons don't participate in constraint validation; they have no real
value to be constrained.
:::
Examples
# ::: section-content
We've included simple examples above. There isn't really anything more
to say about reset buttons.
:::
Technical summary
# ::: section-content
:::
Specifications
# ::: _table
# Specification
# HTML Standard
:::
Browser compatibility
# ::: _table
# Desktop Mobile
Chrome Edge Firefox Internet Opera Safari WebView Chrome Firefox for Android Opera Safari Samsung
Explorer Android Android Android on IOS Internet
reset 1 12 1 Yes 15 1 4.4 18 4 14 1 1.0
Unlike other browsers, Firefox by default [persists the dynamic disabled Unlike other browsers, Firefox by default [persists the dynamic disabled
state](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) state](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)
of a `<button>` across page loads. Use the of a `<button>` across page loads. Use the
[`autocomplete`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-autocomplete) attribute to control this [`autocomplete`](https://developer.mozilla.org/docs/Web/HTML/Element/button#attr-autocomplete) attribute to control this
feature. feature.
:::
See also
# ::: section-content
::: _attribution
© 2005–2023 MDN contributors.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset {._attribution-link}
:::