type
attributeThe 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
, selectedOption
, selectionStart
, selectionEnd
, selectionDirection
, valueAsDate
, and valueAsNumber
IDL attributes; select()
, setSelectionRange()
, stepDown()
, and stepUp()
methods.
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 U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) 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
, selectedOption
, 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.
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 U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) 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
, selectedOption
, 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.
The input
element represents a control for editing a single absolute URL given in the element's value.
The value
attribute, if specified and not empty, must have a value that is a valid URL potentially surrounded by spaces that is also an absolute URL.
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
, selectedOption
, 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.
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:
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.
How the E-mail state operates depends on whether the multiple
attribute is specified or not.
multiple
attribute is not specified on the elementThe input
element represents a control for editing an e-mail address given in the element's value.
The value
attribute, if specified and not empty, must have a value that is a single valid e-mail address.
multiple
attribute is specified on the elementThe input
element represents a control for adding, removing, and editing the e-mail addresses given in the element's values.
The value
attribute, if specified, must have a value that is a valid e-mail address list.
A valid e-mail address is a string that matches the ABNF production 1*( atext / "." ) "@" ldh-str *( "." ldh-str )
where atext
is defined in RFC 5322 section 3.2.3, and ldh-str
is defined in RFC 1034 section 3.5. [ABNF] [RFC5322] [RFC1034]
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, white space characters, and quoted strings in manners unfamiliar to most users) to be of practical use here.
A valid e-mail address list is a set of comma-separated tokens, where each token is itself a valid e-mail address.
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 following common input
element content attributes, IDL attributes, and methods apply to the element when the multiple
attribute is not specified: selectedOption
IDL attribute.
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
, src
,
step
, and width
.
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.
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 U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) 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
, selectedOption
, valueAsDate
, and valueAsNumber
IDL attributes; stepDown()
and stepUp()
methods.
The input
element represents a control for setting the element's value to a string representing a specific global date and time.
The format shown to the user is independent of the format used for form submission. Browsers are encouraged to use user interfaces that present dates and times according to the conventions of the user's preferred locale.
The value
attribute, if specified and not empty, must have a value that is a valid global date and time string.
The min
attribute, if specified, must have a value that is a valid global date and time string. The max
attribute, if specified, must have a value that is a valid global date and time string.
The step
attribute is expressed in seconds. The default step is 60 seconds.
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
, valueAsNumber
, and selectedOption
IDL attributes; stepDown()
and stepUp()
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
, maxlength
, multiple
, pattern
, placeholder
, size
, src
, and width
.
The following IDL attributes and methods do not apply to the element: checked
, files
, selectionStart
, selectionEnd
, and selectionDirection
IDL attributes; select()
and setSelectionRange()
methods.
The following fragment shows part of a calendar application. A user can specify a date and time for a meeting (in his local time zone, probably, though the user agent can allow the user to change that), and since the submitted data includes the time-zone offset, the application can ensure that the meeting is shown at the correct time regardless of the time zones used by all the participants.
<fieldset> <legend>Add Meeting</legend> <p><label>Meeting name: <input type=text name="meeting.label"></label> <p><label>Meeting time: <input type=datetime name="meeting.start"></label> </fieldset>
Had the application used the datetime-local
type instead, the calendar application would have also had to explicitly determine which time zone the user intended.
The input
element represents a control for setting the element's value to a string representing a specific date.
The format shown to the user is independent of the format used for form submission. Browsers are encouraged to use user interfaces that present dates according to the conventions of the user's preferred locale.
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 step
attribute is expressed in days. The default step is 1 day.
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
, valueAsNumber
, and selectedOption
IDL attributes; stepDown()
and stepUp()
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
, maxlength
, multiple
, pattern
, placeholder
, size
, src
, and width
.
The following IDL attributes and methods do not apply to the element: checked
, selectionStart
, selectionEnd
, and selectionDirection
IDL attributes; select()
and setSelectionRange()
methods.
The input
element represents a control for setting the element's value to a string representing a specific month.
The format shown to the user is independent of the format used for form submission. Browsers are encouraged to use user interfaces that present months according to the conventions of the user's preferred locale.
The value
attribute, if specified and not empty, must have a value that is a valid month string.
The min
attribute, if specified, must have a value that is a valid month string. The max
attribute, if specified, must have a value that is a valid month string.
The step
attribute is expressed in months. The default step is 1 month.
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
, valueAsNumber
, and selectedOption
IDL attributes; stepDown()
and stepUp()
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
, maxlength
, multiple
, pattern
, placeholder
, size
, src
, and width
.
The following IDL attributes and methods do not apply to the element: checked
, files
, selectionStart
, selectionEnd
, and selectionDirection
IDL attributes; select()
and setSelectionRange()
methods.
The input
element represents a control for setting the element's value to a string representing a specific week.
The format shown to the user is independent of the format used for form submission. Browsers are encouraged to use user interfaces that present weeks according to the conventions of the user's preferred locale.
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 step
attribute is expressed in weeks. The default step is 1 week.
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
, valueAsNumber
, and selectedOption
IDL attributes; stepDown()
and stepUp()
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
, maxlength
, multiple
, pattern
, placeholder
, size
, src
, and width
.
The following IDL attributes and methods do not apply to the element: checked
, files
, selectionStart
, selectionEnd
, and selectionDirection
IDL attributes; select()
and setSelectionRange()
methods.
The input
element represents a control for setting the element's value to a string representing a specific time.
The format shown to the user is independent of the format used for form submission. Browsers are encouraged to use user interfaces that present times according to the conventions of the user's preferred locale.
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 step
attribute is expressed in seconds. The default step is 60 seconds.
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
, valueAsNumber
, and selectedOption
IDL attributes; stepDown()
and stepUp()
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
, maxlength
, multiple
, pattern
, placeholder
, size
, src
, and width
.
The following IDL attributes and methods do not apply to the element: checked
, files
, selectionStart
, selectionEnd
, and selectionDirection
IDL attributes; select()
and setSelectionRange()
methods.
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 format shown to the user is independent of the format used for form submission. Browsers are encouraged to use user interfaces that present dates and times according to the conventions of the user's preferred locale.
The value
attribute, if specified and not empty, must have a value that is a valid local date and time string.
The min
attribute, if specified, must have a value that is a valid local date and time string. The max
attribute, if specified, must have a value that is a valid local date and time string.
The step
attribute is expressed in seconds. The default step is 60 seconds.
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
, valueAsNumber
, and selectedOption
IDL attributes; stepDown()
and stepUp()
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
, maxlength
, multiple
, pattern
, placeholder
, size
, src
, and width
.
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!