input (type=reset) element
If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Table of contents
Description
The input element, having the "reset" value in its type attribute, represents a button that, when pressed, resets all the fields in the form it belongs to, to their initial values.
The value attribute has a particular meaning for this element: it represents the label of the button, that is usually shown by browsers inside of it.
The way of setting an initial value for a control varies from type to type. In general, the value attribute is the responsible for setting the initial value, but in some cases, the checked or selected attributes may take its place.
Examples
In this example we'll set up a form with a number of fields of different types, each of which has an initial value. Additionally a reset button will be provided to check its functionality.
<form action="../../form-result.php" method="post" target="_blank">
<p>Name: <input type="text" name="fullname" value="Jhon Doe"></p>
<p>Company name: <input type="text" name="companyname" value="Agencity"></p>
<p>Years of service: <input type="number" name="yearsofservice" value="5"></p>
<p>Area:
<label><input type="radio" name="area" value="it"> IT</label>
<label><input type="radio" name="area" value="sales" checked> Sales</label>
<label><input type="radio" name="area" value="planning"> Planning</label>
</p>
<p><label><input type="checkbox" name="insurance"> Has insurance</label></p>
<p>
<input type="submit" value="Edit">
<input type="reset" value="Reset">
</p>
</form>
Attributes
Specific attributes
autofocus
A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog where the control finds itself is shown. If the attribute has the value "autofocus" or the empty string (""), or if it's just present, the control should get the focus as soon as possible, after the page or dialog has been loaded.
Example
<p><input type="reset" value="Reset" autofocus></p>
disabled
A boolean value indicating wether the control is disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the control will be disabled.
Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form is submitted.
Example
<form action="../../form-result.php" method="post" target="_blank">
<p>Signature: <input type="text" name="signature"></p>
<p><label><input type="checkbox" name="agree"> Agree the Terms of Service</label></p>
<p>
<input type="submit" value="Submit">
<input type="reset" value="Reset" disabled>
</p>
</form>
form
The value of the id attribute of the form with which this control is associated to.
This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.
Example
<form id="form1" action="../../form-result.php" method="post" target="_blank">
<p>
Short description: <input type="text" name="shortdesc">
<input type="submit" value="Submit">
</p>
</form>
<p><input type="reset" value="Reset" form="form1"></p>
name
A name for the control. This name will be sent by the browser to the processing agent, paired with the content of the value attribute. Both attributes together will conform a name-value pair that will be used to process the form data.
Currently, the value isindex, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.
The name-value pair of a button is submitted, with the other form data, only if the button has been used to submit the form.
Example
<form action="../../form-result.php" method="post" target="_blank">
<p>Celebración: <input type="text" name="celebracion" value="Año nuevo"></p>
<p>
<input type="submit" value="Enviar">
<input type="reset" name="resetbutton" value="Restaurar">
</p>
</form>
type
A value indicating the type of the field that this element represents. There are twenty two possible values (case-insensitive):
- hidden: a hidden control used to send information to the server, typically managed by scripts.
- text: a control used to input a single-line piece of text.
- search: same as text but for search purposes.
- tel: a control used to provide a telephone number.
- url: a text box used to input a single and absolute URL.
- email: a control designed to edit one or more e-mail addresses.
- password: a text box for editing passwords, where the characters are represented by dots.
- date: a control to input a specific date.
- month: a control to input a specific month.
- week: a control to input a specific week.
- time: a control to input a specific time.
- datetime-local: a control to input a specific local date and time.
- number: a control to input a number.
- range: a control to input one or two numbers inside a range.
- color: a control to input a color.
- checkbox: a control to input a boolean value (true/false).
- radio: a control used to choose one single option among many.
- file: a control used to upload files to the server.
- submit: a button used to submit the form.
- image: same as submit but with the ability to be shown as an image instead of using the default button appearance.
- reset: a button used to reset the form's controls to their default values.
- button: a button with no default action associated.
When this attribute isn't present, the element behaves as it would have the value "text".
Example
<p><input type="reset" value="Restaurar"></p>
value
A value for the control. This value will be sent by the browser to the processing agent, paired with the content of the name attribute. Both attributes together will conform a name-value pair that will be used to process the form data.
Additionally, browsers will use the content of this attribute as a label for the button.
The name-value pair of a button is submitted, with the other form data, only if the button has been used to submit the form.
Processing agents will find little use in the name-value pair passed by a button. Instead, the value attribute has a more important task providing the label that browsers will display as content of the button.
Example
<form action="../../form-result.php" method="post" target="_blank">
<p>Search: <input type="search" name="searchstring" value="Love"></p>
<p>
<input type="submit" value="Search">
<input type="reset" value="Reset">
</p>
</form>
Global attributes
For information about global attributes refer to this list of global attributes in HTML5.
Events
Global events
For information about global events refer to this list of global events in HTML5.