Customer name: name="custname"
>

Telephone: name="custtel"
>

E-mail address: name="custemail"
>

Preferred delivery time: name="delivery"
>

Delivery instructions: name="comments"
>

Submit order

readonly attribute
HTMLFormControlsCollection
elements
readonly attribute long
length
getter
Element
(unsigned long index);
getter
RadioNodeList
or
Element
) (DOMString name);

void
submit
();
void
reset
();
boolean
checkValidity
();
};
The
form
element
represents
a collection of
form-associated elements
, some of which can represent
editable values that can be submitted to a server for processing.
The
accept-charset
attribute gives the
character encodings that are to be used for the submission. If specified, the value must be an
ordered set of unique space-separated tokens
that are
ASCII
case-insensitive
, and each token must be an
ASCII case-insensitive
match for
one of the
labels
of an
ASCII-compatible character
encoding
[ENCODING]
The
name
attribute represents the
form
's name within the
forms
collection. The
value must not be the empty string, and the value must be unique amongst the
form
elements in the
forms
collection that it is in, if
any.
The
autocomplete
attribute is an
enumerated attribute
. The attribute has two states. The
on
keyword maps to the
on
state, and the
off
keyword maps to the
off
state. The attribute may also be omitted. The
missing value default
is the
on
state.
The
off
state indicates that by default,
form controls in the form will have their
autofill field name
set to "
off
"; the
on
state indicates that by default, form controls
in the form will have their
autofill field name
set to "
on
".
The
action
enctype
method
novalidate
and
target
attributes are
attributes for form
submission
form
elements
Returns an
HTMLCollection
of the form controls in the form (excluding image
buttons for historical reasons).
form
length
Returns the number of form controls in the form (excluding image buttons for historical
reasons).
form
index
Returns the
index
th element in the form (excluding image buttons for
historical reasons).
form
name
Returns the form control (or, if there are several, a
RadioNodeList
of the form
controls) in the form with the given
ID
or
name
(excluding image buttons for historical reasons); or, if there
are none, returns the
img
element with the given ID.
Once an element has been referenced using a particular name, that name will continue being
available as a way to reference that element in this method, even if the element's actual
ID
or
name
changes, for as long as
the element remains in the
Document
If there are multiple matching items, then a
RadioNodeList
object containing all
those elements is returned.
form
submit
()
Submits the form.
form
reset
()
Resets the form.
form
checkValidity
()
Returns true if the form's controls are all valid; otherwise, returns false.
The
autocomplete
IDL attribute must
reflect
the content attribute of the same name,
limited to only known
values
The
name
IDL attribute must
reflect
the content attribute of the same name.
The
acceptCharset
IDL attribute must
reflect
the
accept-charset
content
attribute.
The
elements
IDL attribute must return an
HTMLFormControlsCollection
rooted at the
Document
node while the
form
element is
in a
Document
and rooted at the
form
element itself when it is not, whose filter matches
listed elements
whose
form owner
is the
form
element, with the exception of
input
elements whose
type
attribute is in the
Image
Button
state, which must, for historical reasons, be excluded from this particular
collection.
The
length
IDL attribute must return the number
of nodes
represented
by the
elements
collection.
The
supported property indices
at any instant are the indices supported by the
object returned by the
elements
attribute at that
instant.
When a
form
element is
indexed for indexed property
retrieval
, the user agent must return the value returned by the
item
method on the
elements
collection, when invoked with the given index as its
argument.
Each
form
element has a mapping of names to elements called the
past names
map
. It is used to persist names of controls even when they change names.
The
supported property names
consist of the names obtained from the following
algorithm, in the order obtained from this algorithm:
Let
sourced names
be an initially empty ordered list of tuples
consisting of a string, an element, a source, where the source is either
id
name
or
past
, and, if the source is
past
, an age.
For each
listed element
candidate
whose
form owner
is the
form
element, with the exception of any
input
elements whose
type
attribute is in the
Image Button
state, run these substeps:
If
candidate
has an
id
attribute, add
an entry to
sourced names
with that
id
attribute's value as the string,
candidate
as the element, and
id
as
the source.
If
candidate
has a
name
attribute,
add an entry to
sourced names
with that
name
attribute's value as the string,
candidate
as the element, and
name
as the source.
For each
img
element
candidate
whose
form owner
is the
form
element, run these substeps:
If
candidate
has an
id
attribute, add
an entry to
sourced names
with that
id
attribute's value as the string,
candidate
as the element, and
id
as
the source.
If
candidate
has a
name
attribute,
add an entry to
sourced names
with that
name
attribute's value as the string,
candidate
as the element, and
name
as the source.
For each entry
past entry
in the
past names map
add an entry
to
sourced names
with the
past entry
's name as the
string,
past entry
's element as the element,
past
as the source, and
the length of time
past entry
has been in the
past names map
as
the age.
Sort
sourced names
by
tree order
of the element entry of
each tuple, sorting entries with the same element by putting entries whose source is
id
first, then entries whose source is
name
, and finally entries whose source is
past
and sorting entries with the same element and source by their age, oldest first.
Remove any entries in
sourced names
that have the empty string as
their name.
Remove any entries in
sourced names
that have the same name as an
earlier entry in the map.
Return the list of names from
sourced names
, maintaining their
relative order.
The properties exposed in this way must not be enumerable.
When a
form
element is
indexed for named property
retrieval
, the user agent must run the following steps:
Let
candidates
be a
live
RadioNodeList
object containing all the
listed elements
whose
form
owner
is the
form
element that have either an
id
attribute or a
name
attribute equal to
name
, with the exception of
input
elements whose
type
attribute is in the
Image
Button
state, in
tree order
If
candidates
is empty, let
candidates
be a
live
RadioNodeList
object containing all the
img
elements
that are descendants of the
form
element and that have either an
id
attribute or a
name
attribute equal
to
name
, in
tree order
If
candidates
is empty,
name
is the name of one of
the entries in the
form
element's
past names map
: return the object
associated with
name
in that map.
If
candidates
contains more than one node, return
candidates
and abort these steps.
Otherwise,
candidates
contains exactly one node. Add a mapping from
name
to the node in
candidates
in the
form
element's
past names map
, replacing the previous entry with the same name, if
any.
Return the node in
candidates
If an element listed in a
form
element's
past names map
changes
form owner
, then its entries must be removed from that map.
The
submit()
method, when invoked, must
submit
the
form
element from the
form
element itself, with the
submitted from
submit()
method
flag set.
The
reset()
method, when invoked, must run the
following steps:
If the
form
element is marked as
locked for reset
, then abort these
steps.
Mark the
form
element as
locked for reset
Reset
the
form
element.
Unmark the
form
element as
locked for reset
If the
checkValidity()
method is
invoked, the user agent must
statically validate the constraints
of the
form
element, and return true if the constraint validation return a
positive
result, and false if it returned a
negative
result.
This example shows two search forms:

Full name: Format: First Last

Age:

Post code: Format: AB12 3CD

void
stepUp
(optional long n = 1);
void
stepDown
(optional long n = 1);

readonly attribute boolean
willValidate
readonly attribute
ValidityState
validity
readonly attribute DOMString
validationMessage
boolean
checkValidity
();
void
setCustomValidity
(DOMString error);

readonly attribute
NodeList
labels

void
select
();
attribute unsigned long
selectionStart
attribute unsigned long
selectionEnd
attribute DOMString
selectionDirection
void
setRangeText
(DOMString replacement);
void
setRangeText
(DOMString replacement, unsigned long start, unsigned long end, optional
SelectionMode
selectionMode = "preserve");
void
setSelectionRange
(unsigned long start, unsigned long end, optional DOMString direction);
};
The
input
element
represents
a typed data field, usually with a form
control to allow the user to edit the data.
The
type
attribute controls the data type (and
associated control) of the element. It is an
enumerated attribute
. The following
table lists the keywords and states for the attribute — the keywords in the left column map
to the states in the cell in the second column on the same row as the keyword.
Keyword
State
Data type
Control type
hidden
Hidden
An arbitrary string
n/a
text
Text
Text with no line breaks
A text field
Text with no line breaks
Search field
tel
Telephone
Text with no line breaks
A text field
url
URL
An absolute URL
A text field
email
E-mail
An e-mail address or list of e-mail addresses
A text field
password
Password
Text with no line breaks (sensitive information)
A text field that obscures data entry
date
Date
A date (year, month, day) with no time zone
A date control
time
Time
A time (hour, minute, seconds, fractional seconds) with no time zone
A time control
number
Number
A numerical value
A text field or spinner control
range
Range
A numerical value, with the extra semantic that the exact value is not important
A slider control or similar
color
Color
An sRGB color with 8-bit red, green, and blue components
A color well
checkbox
Checkbox
A set of zero or more values from a predefined list
A checkbox
radio
Radio Button
An enumerated value
A radio button
file
File Upload
Zero or more files each with a
MIME type
and optionally a file name
A label and a button
submit
Submit Button
An enumerated value, with the extra semantic that it must be the last value selected and initiates form submission
A button
image
Image Button
A coordinate, relative to a particular image's size, with the extra semantic that it must
be the last value selected and initiates form submission
Either a clickable image, or a button
reset
Reset Button
n/a
A button
button
Button
n/a
A button
The
missing value default
is the
Text
state.
Which of the
accept
alt
autocomplete
checked
dirname
formaction
formenctype
formmethod
formnovalidate
formtarget
height
list
max
maxlength
min
minlength
multiple
pattern
placeholder
readonly
required
size
src
step
, and
width
content
attributes, the
checked
files
valueAsDate
valueAsNumber
, and
list
IDL attributes, the
select()
method, the
selectionStart
selectionEnd
, and
selectionDirection
, IDL attributes, the
setRangeText()
and
setSelectionRange()
methods, the
stepUp()
and
stepDown()
methods, and the
input
and
change
events
apply
to an
input
element depends on
the state of its
type
attribute. The subsections that define
each type also clearly define in normative "bookkeeping" sections which of these feature apply,
and which
do not apply
, to each type. The behavior of these features depends on whether
they apply or not, as defined in their various sections (q.v. for
content attributes
, for
APIs
, for
events
).
The following table
is non-normative and
summarizes which of those
content attributes, IDL attributes, methods, and events
apply
to each state:
Hidden
Text
URL
Telephone
E-mail
Password
Date
Time
Number
Range
Color
Checkbox
Radio Button
File Upload
Submit Button
Image Button
Reset Button
Button
Content attributes
accept
Yes
alt
Yes
autocomplete
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
checked
Yes
dirname
Yes
formaction
Yes
Yes
formenctype
Yes
Yes
formmethod
Yes
Yes
formnovalidate
Yes
Yes
formtarget
Yes
Yes
height
Yes
inputmode
Yes
Yes
list
Yes
Yes
Yes
Yes
Yes
Yes
Yes
max
Yes
Yes
Yes
maxlength
Yes
Yes
Yes
Yes
min
Yes
Yes
Yes
minlength
Yes
Yes
Yes
Yes
multiple
Yes
Yes
pattern
Yes
Yes
Yes
Yes
placeholder
Yes
Yes
Yes
Yes
Yes
readonly
Yes
Yes
Yes
Yes
Yes
Yes
required
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
size
Yes
Yes
Yes
Yes
src
Yes
step
Yes
Yes
Yes
width
Yes
IDL attributes and methods
checked
Yes
files
Yes
value
default
value
value
value
value
value
value
value
value
default/on
filename
default
default
default
valueAsDate
Yes
valueAsNumber
Yes
Yes
Yes
list
Yes
Yes
Yes
Yes
Yes
Yes
Yes
select()
Yes
Yes
Yes
selectionStart
Yes
Yes
Yes
selectionEnd
Yes
Yes
Yes
selectionDirection
Yes
Yes
Yes
setRangeText()
Yes
Yes
Yes
setSelectionRange()
Yes
Yes
Yes
stepDown()
Yes
Yes
Yes
stepUp()
Yes
Yes
Yes
Events
input
event
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
change
event
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Yes
Some states of the
type
attribute define a
value
sanitization algorithm
Each
input
element has a
value
, which is
exposed by the
value
IDL attribute. Some states define an
algorithm to convert a string to a number
, an
algorithm to convert a number to a string
, an
algorithm to convert a string to a
Date
object
, and an
algorithm to convert a
Date
object to a string
, which are used by
max
min
step
valueAsDate
valueAsNumber
stepDown()
, and
stepUp()
Each
input
element has a boolean
dirty
value flag
. The
dirty value flag
must be
initially set to false when the element is created, and must be set to true whenever the user
interacts with the control in a way that changes the
value
(It is also set to true when the value is programmatically changed, as described in the definition
of the
value
IDL attribute.)
The
value
content attribute gives the default
value
of the
input
element.
When the
value
content attribute is added, set,
or removed, if the control's
dirty value flag
is false, the user agent must set the
value
of the element
to the value of the
value
content attribute, if there is
one, or the empty string otherwise, and then run the current
value sanitization
algorithm
, if one is defined.
Each
input
element has a
checkedness
which is exposed by the
checked
IDL attribute.
Each
input
element has a boolean
dirty checkedness flag
. When it is true, the
element is said to have a
dirty checkedness
The
dirty checkedness flag
must be initially
set to false when the element is created, and must be set to true whenever the user interacts with
the control in a way that changes the
checkedness
The
checked
content attribute is a
boolean attribute
that gives the default
checkedness
of the
input
element.
When the
checked
content attribute is added,
if the control does not have
dirty checkedness
, the
user agent must set the
checkedness
of the element to
true; when the
checked
content attribute is removed, if
the control does not have
dirty checkedness
, the user
agent must set the
checkedness
of the element to
false.
The
reset algorithm
for
input
elements is to set the
dirty value flag
and
dirty checkedness flag
back to false, set
the
value
of the element to the value of the
value
content attribute, if there is one, or the empty string
otherwise, set the
checkedness
of the element to true if
the element has a
checked
content attribute and false if
it does not, empty the list of
selected
files
, and then invoke the
value sanitization algorithm
, if the
type
attribute's current state defines one.
Each
input
element can be
mutable
. Except where
otherwise specified, an
input
element is always
mutable
. Similarly, except where otherwise specified, the user
agent should not allow the user to modify the element's
value
or
checkedness
When an
input
element is
disabled
, it is not
mutable
The
readonly
attribute can also in some
cases (e.g. for the
Date
state, but not the
Checkbox
state) stop an
input
element from
being
mutable
The
cloning steps
for
input
elements
must propagate the
value
dirty value flag
checkedness
, and
dirty checkedness flag
from the node being cloned
to the copy.
When an
input
element is first created, the element's rendering and behavior must
be set to the rendering and behavior defined for the
type
attribute's state, and the
value sanitization algorithm
, if one is defined for the
type
attribute's state, must be invoked.
When an
input
element's
type
attribute
changes state, the user agent must run the following steps:
If the previous state of the element's
type
attribute
put the
value
IDL attribute in the
value
mode, and the element's
value
is not the empty string, and the new state of the element's
type
attribute puts the
value
IDL attribute in either the
default
mode or the
default/on
mode, then set the element's
value
content attribute to the element's
value
Otherwise, if the previous state of the element's
type
attribute put the
value
IDL attribute in any mode other than the
value
mode, and the
new state of the element's
type
attribute puts the
value
IDL attribute in the
value
mode, then set the
value
of the element to the value of the
value
content attribute, if there is one, or the empty string
otherwise, and then set the control's
dirty value
flag
to false.
Update the element's rendering and behavior to the new state's.
Invoke the
value sanitization algorithm
, if one is defined for the
type
attribute's new state.
The
name
attribute represents the element's name.
The
dirname
attribute controls how the element's
directionality
is submitted.
The
disabled
attribute is used to make the control non-interactive and to prevent its value from being submitted.
The
form
attribute is used to explicitly associate the
input
element with its
form owner
The
autofocus
attribute controls focus.
The
autocomplete
attribute controls how the user agent provides autofill behavior.
The
indeterminate
IDL attribute must
initially be set to false. On getting, it must return the last value it was set to. On setting, it
must be set to the new value. It has no effect except for changing the appearance of
checkbox
controls.
The
accept
alt
max
min
multiple
pattern
placeholder
required
size
src
and
step
IDL attributes must
reflect
the respective content attributes of the same name. The
dirName
IDL attribute must
reflect
the
dirname
content attribute. The
readOnly
IDL attribute must
reflect
the
readonly
content attribute. The
defaultChecked
IDL attribute must
reflect
the
checked
content attribute. The
defaultValue
IDL attribute must
reflect
the
value
content attribute.
The
type
IDL attribute must
reflect
the respective content attribute of the same name,
limited to only known values
The
maxLength
IDL attribute must
reflect
the
maxlength
content attribute,
limited to only
non-negative numbers
. The
minLength
IDL attribute must
reflect
the
minlength
content attribute,
limited to only
non-negative numbers
The IDL attributes
width
and
height
must return the rendered width and height of
the image, in CSS pixels, if an image is
being rendered
, and is being rendered to a
visual medium; or else the intrinsic width and height of the image, in CSS pixels, if an image is
available
but not being rendered to a visual medium; or else 0,
if no image is
available
. When the
input
element's
type
attribute is not in the
Image Button
state, then no image is
available
[CSS]
On setting, they must act as if they
reflected
the respective
content attributes of the same name.
The
willValidate
validity
, and
validationMessage
IDL attributes, and the
checkValidity()
, and
setCustomValidity()
methods, are part of the
constraint validation API
. The
labels
IDL
attribute provides a list of the element's
label
s. The
select()
selectionStart
selectionEnd
selectionDirection
setRangeText()
, and
setSelectionRange()
methods and IDL attributes
expose the element's text selection. The
autofocus
disabled
form
, and
name
IDL attributes are part of the element's forms API.
4.10.5.1
States of the
type
attribute
4.10.5.1.1
Hidden
state (
type=hidden
Allowed
ARIA role attribute
values:
None
Allowed
ARIA state and property attributes
Global aria-* attributes
When an
input
element's
type
attribute is in
the
Hidden
state, the rules in this section apply.
The
input
element
represents
a value that is not intended to be
examined or manipulated by the user.
Constraint validation
: If an
input
element's
type
attribute is in the
Hidden
state, it is
barred from constraint
validation
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
minlength
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.
The
input
and
change
events
do not apply
4.10.5.1.2
Text
type=text
) state and
state (
type=search
Allowed
ARIA role attribute
values:
textbox
(default -
do not set
) or
combobox
Allowed
ARIA state and property attributes
Global aria-* attributes
Any
aria-*
attributes
applicable to the allowed roles
When an
input
element's
type
attribute is in
the
Text
state or the
state, the rules in this section apply.
The
input
element
represents
a one line plain text edit control for
the element's
value
The difference between the
Text
state
and the
state is primarily stylistic: on
platforms where search fields are distinguished from regular text fields, the
state might result in an appearance consistent with
the platform's search fields rather than appearing like a regular text field.
If the element is
mutable
, its
value
should be editable by the user. User agents must not allow
users to insert "LF" (U+000A) or "CR" (U+000D) characters into the element's
value
If the element is
mutable
, the user agent should allow the
user to change the writing direction of the element, setting it either to a left-to-right writing
direction or a right-to-left writing direction. If the user does so, the user agent must then run
the following steps:
Set the element's
dir
attribute to "
ltr
" if the user selected a left-to-right writing direction, and
rtl
" if the user selected a right-to-left writing
direction.
Queue a task
to
fire a simple event
that bubbles named
input
at the
input
element.
The
value
attribute, if specified, must have a value that
contains no "LF" (U+000A) or "CR" (U+000D) characters.
The
value sanitization algorithm
is as follows
Strip line
breaks
from the
value
The following common
input
element content
attributes, IDL attributes, and methods
apply
to the element:
autocomplete
dirname
list
maxlength
minlength
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.
4.10.5.1.3
Telephone
state (
type=tel
Allowed
ARIA role attribute
values:
textbox
(default -
do not set
) or
combobox
Allowed
ARIA state and property attributes
Global aria-* attributes
Any
aria-*
attributes
applicable to the allowed roles
When an
input
element's
type
attribute is in
the
Telephone
state, the rules in this section apply.
The
input
element
represents
a control for editing a telephone number
given in the element's
value
If the element is
mutable
, its
value
should be editable by the user. User agents may change the
spacing and, with care, the punctuation of
values
that the
user enters. User agents must not allow users to insert "LF" (U+000A) or "CR" (U+000D) characters into the element's
value
The
value
attribute, if specified, must have a value that
contains no "LF" (U+000A) or "CR" (U+000D) characters.
The
value sanitization algorithm
is as follows
Strip line
breaks
from the
value
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
minlength
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.
4.10.5.1.4
URL
state (
type=url
Allowed
ARIA role attribute
values:
textbox
(default -
do not set
) or
combobox
Allowed
ARIA state and property attributes
Global aria-* attributes
Any
aria-*
attributes
applicable to the allowed roles
When an
input
element's
type
attribute is in
the
URL
state, the rules in this section apply.
The
input
element
represents
a control for editing a single
absolute URL
given in the element's
value
If the element is
mutable
, the user agent should allow the
user to change the URL represented by its
value
. User agents
may allow the user to set the
value
to a string that is not
valid
absolute URL
, but may also or instead
automatically escape characters entered by the user so that the
value
is always a
valid
absolute URL
(even if that isn't the actual value seen and edited by the user in the
interface). User agents should allow the user to set the
value
to the empty string. User agents must not allow users to
insert "LF" (U+000A) or "CR" (U+000D) characters into the
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
value sanitization algorithm
is as follows
Strip line
breaks
from the
value
, then
strip leading and
trailing whitespace
from the
value
Constraint validation
: While the
value
of the element is neither the empty string nor a
valid
absolute URL
, the element is
suffering from a type mismatch
The following common
input
element content
attributes, IDL attributes, and methods
apply
to the element:
autocomplete
list
maxlength
minlength
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:


...and the user had typed "
www.w3
", and the user agent had also found that the user
had visited
and
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.
4.10.5.1.5
E-mail
state (
type=email
Allowed
ARIA role attribute
values:
textbox
(default -
do not set
) or
combobox
Allowed
ARIA state and property attributes
Global aria-* attributes
Any
aria-*
attributes
applicable to the allowed roles
When an
input
element's
type
attribute is in
the
E-mail
state, the rules in this section apply.
How the
E-mail
state operates depends on whether the
multiple
attribute is specified or not.
When the
multiple
attribute is not specified on the
element
The
input
element
represents
a control for editing an e-mail
address given in the element's
value
If the element is
mutable
, the user agent should allow the
user to change the e-mail address represented by its
value
. User agents may allow the user to set the
value
to a string that is not a
valid e-mail
address
. The user agent should act in a manner consistent with expecting the user to
provide a single e-mail address. User agents should allow the user to set the
value
to the empty string. User agents must not allow users to
insert "LF" (U+000A) or "CR" (U+000D) characters into the
value
. User agents may transform the
value
for display and editing; in particular, user agents should
convert punycode in the
value
to IDN in the display and
vice versa.
Constraint validation
: While the user interface is representing input that
the user agent cannot convert to punycode, the control is
suffering from bad
input
The
value
attribute, if specified and not empty, must
have a value that is a single
valid e-mail address
The
value sanitization algorithm
is as follows
Strip
line breaks
from the
value
, then
strip
leading and trailing whitespace
from the
value
When the
multiple
attribute is removed, the user
agent must run the
value sanitization algorithm
Constraint validation
: While the
value
of the element is neither the empty string nor a single
valid e-mail address
, the
element is
suffering from a type mismatch
When the
multiple
attribute
is
specified on
the element
The element's
value
are the result of
splitting on commas
the element's
value
The
input
element
represents
a control for adding, removing, and
editing the e-mail addresses given in the element's
value
If the element is
mutable
, the user agent should allow the
user to add, remove, and edit the e-mail addresses represented by its
value
. User agents may allow the user to set any
individual value in the list of
value
to a
string that is not a
valid e-mail address
, but must not allow users to set any
individual value to a string containing "," (U+002C), "LF" (U+000A), or "CR" (U+000D) characters. User agents should allow the user to remove all the addresses
in the element's
value
. User agents may
transform the
value
for display and editing; in
particular, user agents should convert punycode in the
value
to IDN in the display and vice versa.
Constraint validation
: While the user interface describes a situation where
an individual value contains a "," (U+002C) or is representing input that the user agent
cannot convert to punycode, the control is
suffering from bad input
Whenever the user changes the element's
value
, the user agent must run the following
steps:
Let
latest values
be a copy of the element's
value
Strip leading and trailing whitespace
from each value in
latest values
Let the element's
value
be the result of
concatenating all the values in
latest values
, separating each value from
the next by a single "," (U+002C) character, maintaining the list's order.
The
value
attribute, if specified, must have a value
that is a
valid e-mail address list
The
value sanitization algorithm
is as follows
Split on commas
the element's
value
strip leading and trailing whitespace
from
each resulting token, if any, and let the element's
value
be the (possibly empty) resulting list of
(possibly empty) tokens, maintaining the original order.
Let the element's
value
be the result of
concatenating the element's
value
, separating
each value from the next by a single "," (U+002C) character, maintaining the list's
order.
When the
multiple
attribute is set, the user agent
must run the
value sanitization algorithm
Constraint validation
: While the
value
of the element is not a
valid e-mail address list
, the element is
suffering
from a type mismatch
valid e-mail address
is a string that matches the
email
production of the following ABNF, the character set for which is Unicode. This ABNF implements the
extensions described in RFC 1123.
[ABNF]
[RFC5322]
[RFC1034]
[RFC1123]
email = 1*( atext / "." ) "@" label *( "." label )
label = let-dig [ [ ldh-str ] let-dig ] ; limited to a length of 63 characters by
RFC 1034 section 3.5
atext = < as defined in
RFC 5322 section 3.2.3
let-dig = < as defined in
RFC 1034 section 3.5
ldh-str = < as defined in
RFC 1034 section 3.5
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-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
valid e-mail address list
is a
set of comma-separated tokens
, where
each token is itself a
valid e-mail address
To obtain the list of
tokens from a
valid e-mail address list
, and implementation must
split the string on commas
The following common
input
element content
attributes, IDL attributes, and methods
apply
to the element:
autocomplete
list
maxlength
minlength
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.
4.10.5.1.6
Password
state (
type=password
Allowed
ARIA role attribute
values:
textbox
(default -
do not set
).
Allowed
ARIA state and property attributes
Global aria-* attributes
Any
aria-*
attributes
applicable to the allowed roles
When an
input
element's
type
attribute is in
the
Password
state, the rules in this section
apply.
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.
If the element is
mutable
, its
value
should be editable by the user. User agents must not allow
users to insert "LF" (U+000A) or "CR" (U+000D) characters into the
value
The
value
attribute, if specified, must have a value that
contains no "LF" (U+000A) or "CR" (U+000D) characters.
The
value sanitization algorithm
is as follows
Strip line
breaks
from the
value
The following common
input
element content
attributes, IDL attributes, and methods
apply
to the element:
autocomplete
maxlength
minlength
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.
4.10.5.1.7
Date
state (
type=date
Allowed
ARIA role attribute
values:
None
Allowed
ARIA state and property attributes
Global aria-* attributes
When an
input
element's
type
attribute is in
the
Date
state, the rules in this section apply.
The
input
element
represents
a control for setting the element's
value
to a string representing a specific
date
If the element is
mutable
, the user agent should allow the
user to change the
date
represented by its
value
, as obtained by
parsing a
date
from it. User agents must not allow the user to set the
value
to a non-empty string that is not a
valid date
string
. If the user agent provides a user interface for selecting a
date
, then the
value
must be set
to a
valid date string
representing the user's selection. User agents should allow
the user to set the
value
to the empty string.
Constraint validation
: While the user interface describes input that the user
agent cannot convert to a
valid date string
, the control is
suffering from bad
input
See the
introduction section
for a discussion of
the difference between the input format and submission format for date, time, and number form
controls
, and the
implementation notes
regarding localization of form controls
The
value
attribute, if specified and not empty, must
have a value that is a
valid date string
The
value sanitization algorithm
is as follows
: If the
value
of the element is not a
valid date string
, then
set it to the empty string instead.
The
min
attribute, if specified, must have a value that is
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
step scale factor
is 86,400,000
(which converts the days to milliseconds, as used in the other algorithms).
The
default step
is 1 day.
When the element is
suffering from a step mismatch
, the user agent may round the
element's
value
to the nearest
date
for which the element would not
suffer from a step mismatch
The
algorithm to convert a string to a
number
, given a string
input
, is as follows
: If
parsing a date
from
input
results in an
error, then return an error; otherwise, return the number of milliseconds elapsed from midnight
UTC on the morning of 1970-01-01 (the time represented by the value "
1970-01-01T00:00:00.0Z
") to midnight UTC on the morning of the parsed
date
, ignoring leap seconds.
The
algorithm to convert a number to a
string
, given a number
input
, is as follows
: Return a
valid date string
that represents the
date
that, in
UTC, is current
input
milliseconds after midnight UTC on the morning of
1970-01-01 (the time represented by the value "
1970-01-01T00:00:00.0Z
").
The
algorithm to convert a string to a
Date
object
, given a string
input
, is as follows
If
parsing a date
from
input
results
in an error, then return an error; otherwise, return
a new
Date
object
representing midnight UTC on the morning of the parsed
date
The
algorithm to convert a
Date
object to a string
, given a
Date
object
input
, is as follows
: Return a
valid date string
that
represents the
date
current at the time represented by
input
in the UTC time zone.
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
minlength
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.
4.10.5.1.8
Time
state (
type=time
Allowed
ARIA role attribute
values:
None
Allowed
ARIA state and property attributes
Global aria-* attributes
When an
input
element's
type
attribute is in
the
Time
state, the rules in this section apply.
The
input
element
represents
a control for setting the element's
value
to a string representing a specific
time
If the element is
mutable
, the user agent should allow the
user to change the
time
represented by its
value
, as obtained by
parsing a
time
from it. User agents must not allow the user to set the
value
to a non-empty string that is not a
valid time
string
. If the user agent provides a user interface for selecting a
time
, then the
value
must be set
to a
valid time string
representing the user's selection. User agents should allow
the user to set the
value
to the empty string.
Constraint validation
: While the user interface describes input that the user
agent cannot convert to a
valid time string
, the control is
suffering from bad
input
See the
introduction section
for a discussion of
the difference between the input format and submission format for date, time, and number form
controls
, and the
implementation notes
regarding localization of form controls
The
value
attribute, if specified and not empty, must
have a value that is a
valid time string
The
value sanitization algorithm
is as follows
: If the
value
of the element is not a
valid time string
, then
set it to the empty string instead.
The form control
has a periodic domain
The
min
attribute, if specified, must have a value that is
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
step scale factor
is 1000 (which
converts the seconds to milliseconds, as used in the other algorithms).
The
default step
is 60 seconds.
When the element is
suffering from a step mismatch
, the user agent may round the
element's
value
to the nearest
time
for which the element would not
suffer from a step mismatch
The
algorithm to convert a string to a
number
, given a string
input
, is as follows
: If
parsing a time
from
input
results in an
error, then return an error; otherwise, return the number of milliseconds elapsed from midnight to
the parsed
time
on a day with no time changes.
The
algorithm to convert a number to a
string
, given a number
input
, is as follows
: Return a
valid time string
that represents the
time
that is
input
milliseconds after midnight on a day with no time changes.
The
algorithm to convert a string to a
Date
object
, given a string
input
, is as follows
If
parsing a time
from
input
results
in an error, then return an error; otherwise, return
a new
Date
object
representing the parsed
time
in
UTC on 1970-01-01.
The
algorithm to convert a
Date
object to a string
, given a
Date
object
input
, is as follows
: Return a
valid time string
that
represents the UTC
time
component that is represented by
input
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
minlength
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.
4.10.5.1.9
Number
state (
type=number
Allowed
ARIA role attribute
values:
spinbutton
(default -
do not set
).
Allowed
ARIA state and property attributes
Global aria-* attributes
Any
aria-*
attributes
applicable to the allowed roles
When an
input
element's
type
attribute is in
the
Number
state, the rules in this section apply.
The
input
element
represents
a control for setting the element's
value
to a string representing a number.
If the element is
mutable
, the user agent should allow the
user to change the number represented by its
value
, as
obtained from applying the
rules for parsing floating-point number values
to it. User
agents must not allow the user to set the
value
to a
non-empty string that is not a
valid floating-point number
. If the user agent
provides a user interface for selecting a number, then the
value
must be set to the
best representation of the number representing the user's
selection as a floating-point number
. User agents should allow the user to set the
value
to the empty string.
Constraint validation
: While the user interface describes input that the user
agent cannot convert to a
valid floating-point number
, the control is
suffering
from bad input
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). Similarly, a user agent
designed for Romans might display the value in Roman numerals rather than in decimal; or (more
realistically) a user agent designed for the French market might display the value with
apostrophes between thousands and commas before the decimals, and allow the user to enter a value
in that manner, internally converting it to the submission format described above.
The
value
attribute, if specified and not empty, must
have a value that is a
valid floating-point number
The
value sanitization algorithm
is as follows
: If the
value
of the element is not a
valid floating-point
number
, then set it to the empty string instead.
The
min
attribute, if specified, must have a value that is
valid floating-point number
. The
max
attribute,
if specified, must have a value that is a
valid floating-point number
The
step scale factor
is
1.
The
default step
is 1 (allowing only
integers to be selected by the user, unless the
step
base
has a non-integer value).
When the element is
suffering from a step mismatch
, the user agent may round the
element's
value
to the nearest number for which the element
would not
suffer from a step mismatch
. If
there are two such numbers, user agents are encouraged to pick the one nearest positive
infinity.
The
algorithm to convert a string to a
number
, given a string
input
, is as follows
: If applying the
rules for parsing floating-point number values
to
input
results
in an error, then return an error; otherwise, return the resulting number.
The
algorithm to convert a number to a
string
, given a number
input
, is as follows
: Return a
valid floating-point number
that represents
input
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
minlength
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:
How much do you want to charge? $
As described above, a user agent might support numeric input in the user's local format,
converting it to the format required for submission as described above. This might include
handling grouping separators (as in "872,000,000,000") and various decimal separators (such as
"3,99" vs "3.99") or using local digits (such as those in Arabic, Devanagari, Persian, and
Thai).
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).
4.10.5.1.10
Range
state (
type=range
Allowed
ARIA role attribute
values:
slider
(default -
do not set
).
Allowed
ARIA state and property attributes
Global aria-* attributes
Any
aria-*
attributes
applicable to the allowed roles
When an
input
element's
type
attribute is in
the
Range
state, the rules in this section apply.
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.
In this state, the range and step constraints are enforced even during user input,
and there is no way to set the value to the empty string.
If the element is
mutable
, the user agent should allow the
user to change the number represented by its
value
, as
obtained from applying the
rules for parsing floating-point number values
to it. User
agents must not allow the user to set the
value
to a string
that is not a
valid floating-point number
. If the user agent provides a user
interface for selecting a number, then the
value
must be set
to a
best
representation of the number representing the user's selection as a floating-point number
User agents must not allow the user to set the
value
to the
empty string.
Constraint validation
: While the user interface describes input that the user
agent cannot convert to a
valid floating-point number
, the control is
suffering
from bad input
The
value
attribute, if specified, must have a value that
is a
valid floating-point number
The
value sanitization algorithm
is as follows
: If the
value
of the element is not a
valid floating-point
number
, then set it to a
valid floating-point number
that represents the
default value
The
min
attribute, if specified, must have a value that is
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
When the element is
suffering from an underflow
, the user agent must set the
element's
value
to a
valid floating-point
number
that represents the
minimum
When the element is
suffering from an overflow
, if the
maximum
is not less than the
minimum
, the user agent must set the element's
value
to a
valid floating-point number
that
represents the
maximum
The
step scale factor
is
1.
The
default step
is 1 (allowing only
integers, unless the
min
attribute has a non-integer
value).
When the element is
suffering from a step mismatch
, the user agent must round the
element's
value
to the nearest number for which the element
would not
suffer from a step mismatch
, and
which is greater than or equal to the
minimum
, and, if the
maximum
is not less than the
minimum
, which is less than or equal to the
maximum
, if there is a number that matches these constraints. If
two numbers match these constraints, then user agents must use the one nearest to positive
infinity.
For example, the markup

results in a range control whose initial value is 60.
The
algorithm to convert a string to a
number
, given a string
input
, is as follows
: If applying the
rules for parsing floating-point number values
to
input
results
in an error, then return an error; otherwise, return the resulting number.
The
algorithm to convert a number to a
string
, given a number
input
, is as follows
: Return a
valid floating-point number
that represents
input
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
minlength
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:


...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 similarly 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:

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.
Finally, here is an example of a range control with two labeled values:


With styles that make the control draw vertically, it might look as follows:
4.10.5.1.11
Color
state (
type=color
Allowed
ARIA role attribute
values:
None
Allowed
ARIA state and property attributes
Global aria-* attributes
When an
input
element's
type
attribute is in
the
Color
state, the rules in this section apply.
The
input
element
represents
a color well control, for setting the
element's
value
to a string representing a
simple
color
In this state, there is always a color picked, and there is no way to set the
value to the empty string.
If the element is
mutable
, the user agent should allow the
user to change the color represented by its
value
, as
obtained from applying the
rules for parsing simple color values
to it. User agents
must not allow the user to set the
value
to a string that is
not a
valid lowercase simple color
. If the user agent provides a user interface for
selecting a color, then the
value
must be set to the result
of using the
rules for serializing simple color values
to the user's selection. User
agents must not allow the user to set the
value
to the empty
string.
Constraint validation
: While the user interface describes input that the user
agent cannot convert to a
valid lowercase simple color
, the control is
suffering from bad input
The
value
attribute, if specified and not empty, must
have a value that is a
valid simple color
The
value sanitization algorithm
is as follows
: If the
value
of the element is a
valid simple color
, then
set it to the
value
of the element
converted to ASCII
lowercase
; otherwise, set it to the string "
#000000
".
The following common
input
element content attributes and IDL attributes
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
minlength
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.
4.10.5.1.12
Checkbox
state (
type=checkbox
Allowed
ARIA role attribute
values:
checkbox
(default -
do not set
) or
menuitemcheckbox
Allowed
ARIA state and property attributes
Global aria-* attributes
Any
aria-*
attributes
applicable to the allowed roles
When an
input
element's
type
attribute is in
the
Checkbox
state, the rules in this section
apply.
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.
If the element is
mutable
, then: The
pre-click
activation steps
consist of setting the element's
checkedness
to its opposite value (i.e. true if it is false,
false if it is true), and of setting the element's
indeterminate
IDL attribute to false. The
canceled
activation steps
consist of setting the
checkedness
and the element's
indeterminate
IDL attribute back to
the values they had before the
pre-click activation steps
were run. The
activation behavior
is to
fire a simple event
that bubbles named
input
at the element and then
fire a simple event
that bubbles named
change
at the element.
If the element is not
mutable
, it has no
activation
behavior
Constraint validation
: If the element is
required
and its
checkedness
is false, then the element is
suffering from
being missing
input
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
input
and
change
events
apply
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
minlength
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.
4.10.5.1.13
Radio Button
state (
type=radio
Allowed
ARIA role attribute
values:
radio
(default -
do not set
) or
menuitemradio
Allowed
ARIA state and property attributes
Global aria-* attributes
Any
aria-*
attributes
applicable to the allowed roles
When an
input
element's
type
attribute is in
the
Radio Button
state, the rules in this section
apply.
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
also contains all the other
input
elements
that fulfill all of the following conditions:
The
input
element
's
type
attribute is in the
Radio
Button
state.
Either
and
have the same
form owner
or they both have no
form owner
Both
and
are in the same
subtree
They both have a
name
attribute, their
name
attributes are not empty, and the value of
's
name
attribute is a
compatibility
caseless
match for the value of
's
name
attribute.
A document must not contain an
input
element whose
radio button group
contains only that element.
When any of the following phenomena occur, if the element's
checkedness
state is true after the occurrence, the
checkedness
state of all the other elements in the same
radio
button group
must be set to false:
The element's
checkedness
state is set to true (for
whatever reason).
The element's
name
attribute is set, changed, or
removed.
The element's
form owner
changes.
If the element is
mutable
, then: The
pre-click
activation steps
consist of setting the element's
checkedness
to true. The
canceled activation steps
consist of setting the element's
checkedness
to false. The
activation behavior
is to
fire a simple event
that bubbles named
input
at the element and then
fire a simple event
that bubbles named
change
at the element.
If the element is not
mutable
, it has no
activation
behavior
Constraint validation
: If an element in the
radio button group
is
required
, and all of the
input
elements in the
radio button group
have a
checkedness
that is
false, then the element is
suffering from being missing
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
input
and
change
events
apply
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
minlength
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.
4.10.5.1.14
File Upload
state (
type=file
Allowed
ARIA role attribute
values:
None
Allowed
ARIA state and property attributes
Global aria-* attributes
When an
input
element's
type
attribute is in
the
File Upload
state, the rules in this section
apply.
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).
File names must not contain path components, even in the case that a user has selected an
entire directory hierarchy or multiple files with the same name from different directories.
Unless the
multiple
attribute is set, there must be
no more than one file in the list of
selected
files
If the element is
mutable
, then the element's
activation behavior
is to run the following steps:
If the algorithm is not
allowed to show a popup
, then abort these steps
without doing anything else.
Return, but continue running these steps asynchronously.
Optionally, wait until any prior execution of this algorithm has terminated.
Display a prompt to the user requesting that the user specify some files. If the
multiple
attribute is not set, there must be no more than one
file selected; otherwise, any number may be selected. Files can be from the filesystem or created
on the fly, e.g. a picture taken from a camera connected to the user's device.
Wait for the user to have made their selection.
Queue a task
to first update the element's
selected files
so that it represents the user's
selection, then
fire a simple event
that bubbles named
input
at the
input
element, and finally
fire a
simple event
that bubbles named
change
at the
input
element.
If the element is
mutable
, the user agent should allow the
user to change the files on the list in other ways also, e.g. adding or removing files by
drag-and-drop. When the user does so, the user agent must
queue a task
to first
update the element's
selected files
so that
it represents the user's new selection, then
fire a simple event
that bubbles named
input
at the
input
element, and finally
fire
a simple event
that bubbles named
change
at the
input
element.
If the element is not
mutable
, it has no
activation
behavior
and the user agent must not allow the user to change the element's selection.
Constraint validation
: If the element is
required
and the list of
selected files
is empty, then the element is
suffering from being missing
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:
The string
audio/*
Indicates that sound files are accepted.
The string
video/*
Indicates that video files are accepted.
The string
image/*
Indicates that image files are accepted.
valid MIME type with no parameters
Indicates that files of the specified type are accepted.
A string whose first character is a "." (U+002E) character
Indicates that files with the specified file extension are accepted.
The tokens must not be
ASCII case-insensitive
matches for any of the other tokens
(i.e. duplicates are not allowed).
To obtain the list of tokens from the
attribute, the user agent must
split the attribute value on
commas
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.
User agents should prevent the user from selecting files that are not accepted by one (or more)
of these tokens.
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:

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 file name 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 file name from the
value
IDL attribute in a
backwards-compatible way is non-trivial. The following function extracts the file name 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 file name
This can be used as follows:

The name of the file you picked is: (none)

Username:

Password:
4.10.5.3.2
The
size
attribute
The
size
attribute gives the number of
characters that, in a visual rendering, the user agent is to allow the user to see while editing
the element's
value
The
size
attribute, if specified, must have a value that
is a
valid non-negative integer
greater than zero.
If the attribute is present, then its value must be parsed using the
rules for parsing
non-negative integers
, and if the result is a number greater than zero, then the user agent
should ensure that at least that many characters are visible.
The
size
IDL attribute is
limited to only
non-negative numbers greater than zero
and has a default value of 20.
4.10.5.3.3
The
readonly
attribute
The
readonly
attribute is a
boolean
attribute
that controls whether or not the user can edit the form control.
When specified, the element is not
mutable
Constraint validation
: If the
readonly
attribute is specified on an
input
element, the element is
barred from constraint validation
The difference between
disabled
and
readonly
is that read-only controls are still focusable, so the
user can still select the text and interact with it, whereas disabled controls are entirely
non-interactive. (For this reason, only text controls can be made read-only: it wouldn't make
sense for checkboxes or buttons, for instances.)
In the following example, the existing product identifiers cannot be modified, but they are
still displayed as part of the form, for consistency with the row representing a new product
(where the identifier is not yet filled in).

Create new account

A part number is a digit followed by three uppercase letters.

A part number is a digit followed by three uppercase letters.

Enter a breed:

Enter a breed: