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).
<input type="reset"> element's
value attribute contains a string 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 a button with the default label (typically "Reset," but this will vary depending on the user agent):
<input type="reset" />
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.
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.
To disable a reset button, 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 setting
btn.disabled = true or
btn.disabled = false.
Note: See the
<input type="button"> page for more ideas about enabling and disabling buttons.
Buttons don't participate in constraint validation; they have no real value to be constrained.
We've included simple examples above. There isn't really anything more to say about reset buttons.
|HTML Standard |
BCD tables only load in the browser