4.10.7.1 States of the type attribute

The input element represents a value that is not intended to be examined or manipulated by the user.

If the name attribute is present and has a value that is a case-sensitive match for the string "_charset_", then the element's value attribute must be omitted.

The value IDL attribute applies to this element and is in mode default.

The following content attributes must not be specified and do not apply to the element: accept, alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, pattern, placeholder, readonly, required, size, src, step, and width.

The following IDL attributes and methods do not apply to the element: checked, files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setSelectionRange(), stepDown(), and stepUp() methods.

The input and change events do not apply.

4.10.7.1.2 Text (type=text) state and Search state (type=search)

The input element represents a one line plain text edit control for the element's value.

The difference between the Text state and the Search state is primarily stylistic: on platforms where search fields are distinguished from regular text fields, the Search state might result in an appearance consistent with the platform's search fields rather than appearing like a regular text field.

The value attribute, if specified, must have a value that contains no "LF" (U+000A) or "CR" (U+000D) characters.

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, dirname, list, maxlength, pattern, placeholder, readonly, required, and size content attributes; list, selectionStart, selectionEnd, selectionDirection, and value IDL attributes; select() and setSelectionRange() methods.

The value IDL attribute is in mode value.

The input and change events apply.

The following content attributes must not be specified and do not apply to the element: accept, alt, checked, formaction, formenctype, formmethod, formnovalidate, formtarget, height, max, min, multiple, src, step, and width.

The following IDL attributes and methods do not apply to the element: checked, files, valueAsDate, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.

4.10.7.1.3 Telephone state (type=tel)

The input element represents a control for editing a telephone number given in the element's value.

The value attribute, if specified, must have a value that contains no "LF" (U+000A) or "CR" (U+000D) characters.

Unlike the URL and E-mail types, the Telephone type does not enforce a particular syntax. This is intentional; in practice, telephone number fields tend to be free-form fields, because there are a wide variety of valid phone numbers. Systems that need to enforce a particular format are encouraged to use the pattern attribute or the setCustomValidity() method to hook into the client-side validation mechanism.

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, maxlength, pattern, placeholder, readonly, required, and size content attributes; list, selectionStart, selectionEnd, selectionDirection, and value IDL attributes; select() and setSelectionRange() methods.

The value IDL attribute is in mode value.

The input and change events apply.

The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, max, min, multiple, src, step, and width.

The following IDL attributes and methods do not apply to the element: checked, files, valueAsDate, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.

4.10.7.1.4 URL state (type=url)

The value IDL attribute is in mode value.

The input and change events apply.

The following IDL attributes and methods do not apply to the element: checked, files, valueAsDate, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.

If a document contained the following markup:

<input type="url" name="location" list="urls">
<datalist id="urls">
 <option label="MIME: Format of Internet Message Bodies" value="http://tools.ietf.org/html/rfc2045">
 <option label="HTML 4.01 Specification" value="http://www.w3.org/TR/html4/">
 <option label="Form Controls" value="http://www.w3.org/TR/xforms/slice8.html#ui-commonelems-hint">
 <option label="Scalable Vector Graphics (SVG) 1.1 Specification" value="http://www.w3.org/TR/SVG/">
 <option label="Feature Sets - SVG 1.1 - 20030114" value="http://www.w3.org/TR/SVG/feature.html">
 <option label="The Single UNIX Specification, Version 3" value="http://www.unix-systems.org/version3/">
</datalist>

...and the user had typed "www.w3", and the user agent had also found that the user had visited http://www.w3.org/Consortium/#membership and http://www.w3.org/TR/XForms/ in the recent past, then the rendering might look like this:

A text box with an icon on the left followed by the text "www.w3" and a cursor, with a drop down button on the right hand side; with, below, a drop down box containing a list of six URLs on the left, with the first four having grayed out labels on the right; and a scroll bar to the right of the drow down box, indicating further values are available.

The first four URLs in this sample consist of the four URLs in the author-specified list that match the text the user has entered, sorted in some UA-defined manner (maybe by how frequently the user refers to those URLs). Note how the UA is using the knowledge that the values are URLs to allow the user to omit the scheme part and perform intelligent matching on the domain name.

The last two URLs (and probably many more, given the scrollbar's indications of more values being available) are the matches from the user agent's session history data. This data is not made available to the page DOM. In this particular case, the UA has no titles to provide for those values.

4.10.7.1.5 E-mail state (type=email)

How the E-mail state operates depends on whether the multiple attribute is specified or not.

This requirement is a willful violation of RFC 5322, which defines a syntax for e-mail addresses that is simultaneously too strict (before the "@" character), too vague (after the "@" character), and too lax (allowing comments, whitespace characters, and quoted strings in manners unfamiliar to most users) to be of practical use here.

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, maxlength, multiple, pattern, placeholder, readonly, required, and size content attributes; list and value IDL attributes.

The value IDL attribute is in mode value.

The input and change events apply.

The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setSelectionRange(), stepDown() and stepUp() methods.

4.10.7.1.6 Password state (type=password)

The input element represents a one line plain text edit control for the element's value. The user agent should obscure the value so that people other than the user cannot see it.

The value attribute, if specified, must have a value that contains no "LF" (U+000A) or "CR" (U+000D) characters.

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, maxlength, pattern, placeholder, readonly, required, and size content attributes; selectionStart, selectionEnd, selectionDirection, and value IDL attributes; select(), and setSelectionRange() methods.

The value IDL attribute is in mode value.

The input and change events apply.

The following content attributes must not be specified and do not apply to the element: accept, alt, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, min, multiple, src, step, and width.

The following IDL attributes and methods do not apply to the element: checked, files, list, valueAsDate, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.

4.10.7.1.7 Date and Time state (type=datetime)

See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls.

The Date and Time state (and other date- and time-related states described in subsequent sections) is not intended for the entry of values for which a precise date and time relative to the contemporary calendar cannot be established. For example, it would be inappropriate for the entry of times like "one millisecond after the big bang", "the early part of the Jurassic period", or "a winter around 250 BCE".

For the input of dates before the introduction of the Gregorian calendar, authors are encouraged to not use the Date and Time state (and the other date- and time-related states described in subsequent sections), as user agents are not required to support converting dates and times from earlier periods to the Gregorian calendar, and asking users to do so manually puts an undue burden on users. (This is complicated by the manner in which the Gregorian calendar was phased in, which occurred at different times in different countries, ranging from partway through the 16th century all the way to early in the 20th.) Instead, authors are encouraged to provide fine-grained input controls using the select element and input elements with the Number state.

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, readonly, required, and step content attributes; list, value, valueAsDate, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.

The value IDL attribute is in mode value.

The input and change events apply.

The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, and selectionDirection IDL attributes; select() and setSelectionRange() methods.

4.10.7.1.8 Date state (type=date)

The input element represents a control for setting the element's value to a string representing a specific date.

See the introduction section for a discussion of the difference between the input format and submission format for date, time, and number form controls.

The value attribute, if specified and not empty, must have a value that is a valid date string.

The min attribute, if specified, must have a value that is a valid date string. The max attribute, if specified, must have a value that is a valid date string.

The value IDL attribute is in mode value.

The input and change events apply.

The following IDL attributes and methods do not apply to the element: checked, selectionStart, selectionEnd, and selectionDirection IDL attributes; select() and setSelectionRange() methods.

4.10.7.1.9 Month state (type=month)

The input element represents a control for setting the element's value to a string representing a specific month.

The value attribute, if specified and not empty, must have a value that is a valid month string.

The value IDL attribute is in mode value.

The input and change events apply.

4.10.7.1.10 Week state (type=week)

The input element represents a control for setting the element's value to a string representing a specific week.

The value attribute, if specified and not empty, must have a value that is a valid week string.

The min attribute, if specified, must have a value that is a valid week string. The max attribute, if specified, must have a value that is a valid week string.

The value IDL attribute is in mode value.

The input and change events apply.

4.10.7.1.11 Time state (type=time)

The input element represents a control for setting the element's value to a string representing a specific time.

The value attribute, if specified and not empty, must have a value that is a valid time string.

The min attribute, if specified, must have a value that is a valid time string. The max attribute, if specified, must have a value that is a valid time string.

The value IDL attribute is in mode value.

The input and change events apply.

4.10.7.1.12 Local Date and Time state (type=datetime-local)

The input element represents a control for setting the element's value to a string representing a local date and time, with no time-zone offset information.

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, readonly, required, and step content attributes; list, value, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.

The value IDL attribute is in mode value.

The input and change events apply.

The following IDL attributes and methods do not apply to the element: checked, files, selectionStart, selectionEnd, selectionDirection, and valueAsDate IDL attributes; select() and setSelectionRange() methods.

The following example shows part of a flight booking application. The application uses an input element with its type attribute set to datetime-local, and it then interprets the given date and time in the time zone of the selected airport.

<fieldset>
 <legend>Destination</legend>
 <p><label>Airport: <input type=text name=to list=airports></label></p>
 <p><label>Departure time: <input type=datetime-local name=totime step=3600></label></p>
</fieldset>
<datalist id=airports>
 <option value=ATL label="Atlanta">
 <option value=MEM label="Memphis">
 <option value=LHR label="London Heathrow">
 <option value=LAX label="Los Angeles">
 <option value=FRA label="Frankfurt">
</datalist>

If the application instead used the datetime type, then the user would have to work out the time-zone conversions himself, which is clearly not a good user experience!

4.10.7.1.13 Number state (type=number)

The input element represents a control for setting the element's value to a string representing a number.

This specification does not define what user interface user agents are to use; user agent vendors are encouraged to consider what would best serve their users' needs. For example, a user agent in Persian or Arabic markets might support Persian and Arabic numeric input (converting it to the format required for submission as described above).

The default step is 1 (allowing only integers, unless the min attribute has a non-integer value).

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, placeholder, readonly, required, and step content attributes; list, value, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.

The value IDL attribute is in mode value.

The input and change events apply.

4.10.7.1.14 Range state (type=range)

The input element represents a control for setting the element's value to a string representing a number, but with the caveat that the exact value is not important, letting UAs provide a simpler interface than they do for the Number state.

The default step is 1 (allowing only integers, unless the min attribute has a non-integer value).

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, list, max, min, and step content attributes; list, value, and valueAsNumber IDL attributes; stepDown() and stepUp() methods.

The value IDL attribute is in mode value.

The input and change events apply.

Here is an example of a range control using an autocomplete list with the list attribute. This could be useful if there are values along the full range of the control that are especially important, such as preconfigured light levels or typical speed limits in a range control used as a speed control. The following markup fragment:

<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
<datalist id="powers">
 <option value="0">
 <option value="-30">
 <option value="30">
 <option value="+50">
</datalist>

...with the following style sheet applied:

input { height: 75px; width: 49px; background: #D5CCBB; color: black; }

...might render as:

A vertical slider control whose primary color is black and whose background color is beige, with the slider having five tick marks, one long one at each extremity, and three short ones clustered around the midpoint.

Note how the UA determined the orientation of the control from the ratio of the style-sheet-specified height and width properties. The colors were similiarly derived from the style sheet. The tick marks, however, were derived from the markup. In particular, the step attribute has not affected the placement of tick marks, the UA deciding to only use the author-specified completion values and then adding longer tick marks at the extremes.

Note also how the invalid value +50 was completely ignored.

4.10.7.1.15 Color state (type=color)

The value attribute, if specified and not empty, must have a value that is a valid simple color.

The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete and list content attributes; list and value IDL attributes.

The value IDL attribute is in mode value.

The input and change events apply.

4.10.7.1.16 Checkbox state (type=checkbox)

The input element represents a two-state control that represents the element's checkedness state. If the element's checkedness state is true, the control represents a positive selection, and if it is false, a negative selection. If the element's indeterminate IDL attribute is set to true, then the control's selection should be obscured as if the control was in a third, indeterminate, state.

The control is never a true tri-state control, even if the element's indeterminate IDL attribute is set to true. The indeterminate IDL attribute only gives the appearance of a third state.

The following common input element content attributes and IDL attributes apply to the element: checked, and required content attributes; checked and value IDL attributes.

The value IDL attribute is in mode default/on.

The change event applies.

The following content attributes must not be specified and do not apply to the element: accept, alt, autocomplete, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, pattern, placeholder, readonly, size, src, step, and width.

The following IDL attributes and methods do not apply to the element: files, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setSelectionRange(), stepDown(), and stepUp() methods.

The input event does not apply.

4.10.7.1.17 Radio Button state (type=radio)

The input element represents a control that, when used in conjunction with other input elements, forms a radio button group in which only one control can have its checkedness state set to true. If the element's checkedness state is true, the control represents the selected control in the group, and if it is false, it indicates a control in the group that is not selected.

The radio button group that contains an input element a also contains all the other input elements b that fulfill all of the following conditions:

A document must not contain an input element whose radio button group contains only that element.

If none of the radio buttons in a radio button group are checked when they are inserted into the document, then they will all be initially unchecked in the interface, until such time as one of them is checked (either by the user or by script).

The following common input element content attributes and IDL attributes apply to the element: checked and required content attributes; checked and value IDL attributes.

The value IDL attribute is in mode default/on.

The change event applies.

The input event does not apply.

4.10.7.1.18 File Upload state (type=file)

The input element represents a list of selected files, each file consisting of a file name, a file type, and a file body (the contents of the file).

The accept attribute may be specified to provide user agents with a hint of what file types will be accepted.

The tokens must not be ASCII case-insensitive matches for any of the other tokens (i.e. duplicates are not allowed).

User agents may use the value of this attribute to display a more appropriate user interface than a generic file picker. For instance, given the value image/*, a user agent could offer the user the option of using a local camera or selecting a photograph from their photo collection; given the value audio/*, a user agent could offer the user the option of recording a clip using a headset microphone.

For historical reasons, the value IDL attribute prefixes the filename with the string "C:\fakepath\". Some legacy user agents actually included the full path (which was a security vulnerability). As a result of this, obtaining the filename from the value IDL attribute in a backwards-compatible way is non-trivial. The following function extracts the filename in a suitably compatible manner:

function extractFilename(path) {
  if (path.substr(0, 12) == "C:\\fakepath\\")
    return path.substr(12); // modern browser
  var x;
  x = path.lastIndexOf('/');
  if (x >= 0) // Unix-based path
    return path.substr(x+1);
  x = path.lastIndexOf('\\');
  if (x >= 0) // Windows-based path
    return path.substr(x+1);
  return path; // just the filename
}

This can be used as follows:

<p><input type=file name=image onchange="updateFilename(this.value)"></p>
<p>The name of the file you picked is: <span id="filename">(none)</span></p>
<script>
 function updateFilename(path) {
   var name = extractFilename(path);
   document.getElementById('filename').textContent = name;
 }
</script>

The following common input element content attributes apply to the element:

The following common input element content attributes and IDL attributes apply to the element: accept, multiple, and required; files and value IDL attributes.

The value IDL attribute is in mode filename.

The change event applies.

The following content attributes must not be specified and do not apply to the element: alt, autocomplete, checked, dirname, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, pattern, placeholder, readonly, size, src, step, and width.

The element's value attribute must be omitted.

The following IDL attributes and methods do not apply to the element: checked, list, selectionStart, selectionEnd, selectionDirection, valueAsDate, and valueAsNumber IDL attributes; select(), setSelectionRange(), stepDown(), and stepUp() methods.

The input event does not apply.

4.10.7.1.19 Submit Button state (type=submit)

The formnovalidate attribute can be used to make submit buttons that do not trigger the constraint validation.

The following common input element content attributes and IDL attributes apply to the element: formaction, formenctype, formmethod, formnovalidate, and formtarget content attributes; value IDL attribute.

The value IDL attribute is in mode default.

The following content attributes must not be specified and do not apply to the element: accept, alt, autocomplete, checked, dirname, height, list, max, maxlength, min, multiple, pattern, placeholder, readonly, required, size, src, step, and width.

The input and change events do not apply.

4.10.7.1.20 Image Button state (type=image)

The input element represents either an image from which a user can select a coordinate and submit the form, or alternatively a button from which the user can submit the form. The element is a button, specifically a submit button.

The coordinate is sent to the server during form submission by sending two entries for the element, derived from the name of the control but with ".x" and ".y" appended to the name with the x and y components of the coordinate respectively.

The image is given by the src attribute. The src attribute must be present, and must contain a valid non-empty URL potentially surrounded by spaces referencing a non-interactive, optionally animated, image resource that is neither paged nor scripted.

The alt attribute provides the textual label for the button for users and user agents who cannot use the image. The alt attribute must be present, and must contain a non-empty string.

The following common input element content attributes and IDL attributes apply to the element: alt, formaction, formenctype, formmethod, formnovalidate, formtarget, height, src, and width content attributes; value IDL attribute.

The value IDL attribute is in mode default.

The following content attributes must not be specified and do not apply to the element: accept, autocomplete, checked, dirname, list, max, maxlength, min, multiple, pattern, placeholder, readonly, required, size, and step.

The element's value attribute must be omitted.

The input and change events do not apply.

Many aspects of this state's behavior are similar to the behavior of the img element. Readers are encouraged to read that section, where many of the same requirements are described in more detail.

4.10.7.1.21 Reset Button state (type=reset)

The input element represents a button that, when activated, resets the form. The element is a button.

The value IDL attribute applies to this element and is in mode default.

The input and change events do not apply.

4.10.7.1.22 Button state (type=button)

The input element represents a button with no default behavior. A label for the button must be provided in the value attribute, though it may be the empty string. The element is a button.

The value IDL attribute applies to this element and is in mode default.

The input and change events do not apply.

HTML5: Edition for Web Authors

4.10.7.1 States of the `type` attribute

4.10.7.1.1 Hidden state (`type=hidden`)

4.10.7.1.2 Text (`type=text`) state and Search state (`type=search`)

4.10.7.1.3 Telephone state (`type=tel`)

4.10.7.1.4 URL state (`type=url`)

4.10.7.1.5 E-mail state (`type=email`)

4.10.7.1.6 Password state (`type=password`)

4.10.7.1.7 Date and Time state (`type=datetime`)

4.10.7.1.8 Date state (`type=date`)

4.10.7.1.9 Month state (`type=month`)

4.10.7.1.10 Week state (`type=week`)

4.10.7.1.11 Time state (`type=time`)

4.10.7.1.12 Local Date and Time state (`type=datetime-local`)

4.10.7.1.13 Number state (`type=number`)

4.10.7.1.14 Range state (`type=range`)

4.10.7.1.15 Color state (`type=color`)

4.10.7.1.16 Checkbox state (`type=checkbox`)

4.10.7.1.17 Radio Button state (`type=radio`)

4.10.7.1.18 File Upload state (`type=file`)

4.10.7.1.19 Submit Button state (`type=submit`)

4.10.7.1.20 Image Button state (`type=image`)

4.10.7.1.21 Reset Button state (`type=reset`)

4.10.7.1.22 Button state (`type=button`)

HTML5: Edition for Web Authors

4.10.7.1.1 Hidden state (type=hidden)

4.10.7.1.2 Text (type=text) state and Search state (type=search)

4.10.7.1.3 Telephone state (type=tel)

4.10.7.1.4 URL state (type=url)

4.10.7.1.5 E-mail state (type=email)

4.10.7.1.6 Password state (type=password)

4.10.7.1.7 Date and Time state (type=datetime)

4.10.7.1.8 Date state (type=date)

4.10.7.1.9 Month state (type=month)

4.10.7.1.10 Week state (type=week)

4.10.7.1.11 Time state (type=time)

4.10.7.1.12 Local Date and Time state (type=datetime-local)

4.10.7.1.13 Number state (type=number)

4.10.7.1.14 Range state (type=range)

4.10.7.1.15 Color state (type=color)

4.10.7.1.16 Checkbox state (type=checkbox)

4.10.7.1.17 Radio Button state (type=radio)

4.10.7.1.18 File Upload state (type=file)

4.10.7.1.19 Submit Button state (type=submit)

4.10.7.1.20 Image Button state (type=image)

4.10.7.1.21 Reset Button state (type=reset)

4.10.7.1.22 Button state (type=button)

4.10.7.1 States of the `type` attribute

4.10.7.1.1 Hidden state (`type=hidden`)

4.10.7.1.2 Text (`type=text`) state and Search state (`type=search`)

4.10.7.1.3 Telephone state (`type=tel`)

4.10.7.1.4 URL state (`type=url`)

4.10.7.1.5 E-mail state (`type=email`)

4.10.7.1.6 Password state (`type=password`)

4.10.7.1.7 Date and Time state (`type=datetime`)

4.10.7.1.8 Date state (`type=date`)

4.10.7.1.9 Month state (`type=month`)

4.10.7.1.10 Week state (`type=week`)

4.10.7.1.11 Time state (`type=time`)

4.10.7.1.12 Local Date and Time state (`type=datetime-local`)

4.10.7.1.13 Number state (`type=number`)

4.10.7.1.14 Range state (`type=range`)

4.10.7.1.15 Color state (`type=color`)

4.10.7.1.16 Checkbox state (`type=checkbox`)

4.10.7.1.17 Radio Button state (`type=radio`)

4.10.7.1.18 File Upload state (`type=file`)

4.10.7.1.19 Submit Button state (`type=submit`)

4.10.7.1.20 Image Button state (`type=image`)

4.10.7.1.21 Reset Button state (`type=reset`)

4.10.7.1.22 Button state (`type=button`)