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()
,
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()
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()
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()
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()
,
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()
, 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()
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()
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()
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()
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()
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()
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()
and
setSelectionRange()
methods.
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()
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()
,
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()
,
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()
,
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.
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.
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()
,
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()
,
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()
,
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()
,
setSelectionRange()
,
stepDown()
, and
stepUp()
methods.