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
,
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
, 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
, 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, 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
, 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, 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
,
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
, 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, 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
, and
selectionEnd
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, 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
, and
selectionEnd
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, 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
, and
selectionEnd
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, 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
, and
selectionEnd
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, 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
, and
selectionEnd
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, 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
, 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!