type
attribute
type=text
) state and
Search state (type=search
)type=tel
)type=url
)type=email
)type=password
)type=datetime
)type=date
)type=month
)type=week
)type=time
)type=datetime-local
)type=number
)type=range
)type=color
)type=checkbox
)type=radio
)type=file
)type=submit
)type=image
)type=reset
)type=button
)type
attributetype=hidden
)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()
, setRangeText()
,
setSelectionRange()
,
stepDown()
,
and stepUp()
methods.
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()
, setRangeText()
, 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.
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()
, setRangeText()
, 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.
type=url
)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
,
selectionStart
,
selectionEnd
,
selectionDirection
,
and value
IDL attributes; select()
, setRangeText()
, 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.
type=email
)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, whitespace characters, and quoted strings in manners unfamiliar to most users) to be of practical use here.
The following JavaScript- and Perl-compatible regular expression is an implementation of the above definition.
/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
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 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()
, setRangeText()
,
setSelectionRange()
,
stepDown()
and stepUp()
methods.
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()
, setRangeText()
, 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.
type=datetime
)The input
element represents
a control for setting the element's value to a string representing a
specific global date and
time.
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 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 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 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()
, setRangeText()
, 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.
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 step
attribute is expressed in days. The
default step is 1 day.
See the note on historical dates in the Date and Time state section.
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 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()
, setRangeText()
, and
setSelectionRange()
methods.
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 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
, and
valueAsNumber
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()
, setRangeText()
, and
setSelectionRange()
methods.
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 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
, and
valueAsNumber
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()
, setRangeText()
, and
setSelectionRange()
methods.
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 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
, and
valueAsNumber
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()
, setRangeText()
, and
setSelectionRange()
methods.
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 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.
See the note on historical dates in the Date and Time state section.
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 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()
, setRangeText()
, 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!
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 value
attribute, if specified and not
empty, must have a value that is a valid floating-point
number.
The min
attribute, if specified, must have a value
that is a valid floating-point number.
The max
attribute, if specified, must have a value
that is a valid floating-point
number.
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.
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
, 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()
, setRangeText()
, and
setSelectionRange()
methods.
Here is an example of using a numeric input control:
<label>How much do you want to charge? $<input type=number min=0 step=0.01 name=price></label>
The type=number
state is not
appropriate for input that happens to only consist of numbers but
isn't strictly speaking a number. For example, it would be
inappropriate for credit card numbers or US postal codes. A simple
way of determining whether to use type=number
is to consider whether it would make sense for the input control to
have a spinbox interface (e.g. with "up" and "down" arrows).
Getting a credit card number wrong by 1 in the last digit isn't a
minor mistake, it's as wrong as getting every digit incorrect. So
it would not make sense for the user to select a credit card number
using "up" and "down" buttons. When a spinbox interface is not
appropriate, type=text
is probably the right
choice (possibly with a pattern
attribute).
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 value
attribute, if specified, must have a
value that is a valid floating-point
number.
The min
attribute, if specified, must have a value
that is a valid floating-point number.
The default minimum is 0. The
max
attribute, if specified, must have a value
that is a valid floating-point number.
The default maximum is 100.
The default value is the minimum plus half the difference between the minimum and the maximum, unless the maximum is less than the minimum, in which case the default value is the minimum.
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.
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
, readonly
, required
, 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()
, setRangeText()
, and
setSelectionRange()
methods.
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:
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.
For another example, consider the following markup fragment:
<input name=x type=range min=100 max=700 step=9.09090909 value=509.090909>
A user agent could display in a variety of ways, for instance:
Or, alternatively, for instance:
The user agent could pick which one to display based on the dimensions given in the style sheet. This would allow it to maintain the same resolution for the tick marks, despite the differences in width.
type=color
)The input
element represents
a color well control, for setting the element's value to a string representing a
simple 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.
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
, 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
,
selectionStart
,
selectionEnd
, selectionDirection
,
valueAsDate
, and
valueAsNumber
IDL attributes; select()
, setRangeText()
,
setSelectionRange()
,
stepDown()
,
and stepUp()
methods.
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.
indeterminate
[ = value ]When set, overrides the rendering of checkbox controls so that the current value is not visible.
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()
, setRangeText()
,
setSelectionRange()
,
stepDown()
,
and stepUp()
methods.
The input
event does not apply.
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:
input
element b's
type
attribute is in the Radio
Button state.name
attribute, their name
attributes are not empty, and the value
of a's name
attribute is a compatibility caseless match for
the value of b's name
attribute.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 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()
, setRangeText()
,
setSelectionRange()
,
stepDown()
,
and stepUp()
methods.
The input
event does not apply.
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.
If specified, the attribute must consist of a set of comma-separated tokens, each of which must be an ASCII case-insensitive match for one of the following:
audio/*
video/*
image/*
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.
Authors are encouraged to specify both any MIME types and any corresponding extensions when looking for data in a specific format.
For example, consider an application that converts Microsoft Word documents to Open Document Format files. Since Microsoft Word documents are described with a wide variety of MIME types and extensions, the site can list several, as follows:
<input type="file" accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
On platforms that only use file extensions to describe file types, the extensions listed here can be used to filter the allowed documents, while the MIME types can be used with the system's type registration table (mapping MIME types to extensions used by the system), if any, to determine any other extensions to allow. Similarly, on a system that does not have file names or extensions but labels documents with MIME types internally, the MIME types can be used to pick the allowed files, while the extensions can be used if the system has an extension registration table that maps known extensions to MIME types used by the system.
Extensions tend to be ambiguous (e.g. there are
an untold number of formats that use the ".dat
" extension, and users can typically quite easily
rename their files to have a ".doc
" extension
even if they are not Microsoft Word documents), and MIME types tend
to be unreliable (e.g. many formats have no formally registered
types, and many formats are in practice labeled using a number of
different MIME types). Authors are reminded that, as usual, data
received from a client should be treated with caution, as it may
not be in an expected format even if the user is not hostile and
the user agent fully obeyed the accept
attribute's requirements.
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()
, setRangeText()
,
setSelectionRange()
,
stepDown()
,
and stepUp()
methods.
The input
event does not apply.
type=submit
)The input
element represents
a button that, when activated, submits the form. The element is a
button, specifically
a submit
button.
The formaction
, formenctype
, formmethod
, formnovalidate
, and formtarget
attributes are attributes for form
submission.
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 following IDL attributes and methods do not apply to the
element:
checked
, files
,
list
,
selectionStart
,
selectionEnd
, selectionDirection
,
valueAsDate
, and
valueAsNumber
IDL attributes; select()
, setRangeText()
,
setSelectionRange()
,
stepDown()
,
and stepUp()
methods.
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 input
element supports dimension attributes.
The formaction
, formenctype
, formmethod
, formnovalidate
, and formtarget
attributes are attributes for form
submission.
width
[ = value ]height
[ = value ]These attributes return the actual rendered dimensions of the image, or zero if the dimensions are not known.
They can be set, to change the corresponding content attributes.
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 following IDL attributes and methods do not apply to the
element:
checked
, files
,
list
,
selectionStart
,
selectionEnd
, selectionDirection
,
valueAsDate
, and
valueAsNumber
IDL attributes; select()
, setRangeText()
,
setSelectionRange()
,
stepDown()
,
and stepUp()
methods.
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.
Take the following form:
<form action="process.cgi"> <input type=image src=map.png name=where> </form>
If the user clicked on the image at coordinate (127,40) then the
URL used to submit the form would be "process.cgi?where.x=127&where.y=40
".
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 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()
, setRangeText()
,
setSelectionRange()
,
stepDown()
,
and stepUp()
methods.
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 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()
, setRangeText()
,
setSelectionRange()
,
stepDown()
,
and stepUp()
methods.