The input
element represents a control
for setting the element's value to a string representing a
number.
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 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
,
readonly
,
required
, and
step
content attributes;
list
,
value
,
valueAsNumber
, and
selectedOption
IDL attributes;
stepDown()
and
stepUp()
methods.
The value
IDL attribute is
in mode value.
The input
and change
events apply.
The following content attributes must not be specified and do not
apply to the element:
accept
,
alt
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
maxlength
,
multiple
,
pattern
,
placeholder
,
size
,
src
, and
width
.
The following IDL attributes and methods do not apply to the
element:
checked
,
files
,
selectionStart
,
selectionEnd
, and
valueAsDate
IDL attributes;
select()
and
setSelectionRange()
methods.
The 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
,
valueAsNumber
, and
selectedOption
IDL attributes;
stepDown()
and
stepUp()
methods.
The value
IDL attribute is
in mode value.
The input
and change
events apply.
The following content attributes must not be specified and do not
apply to the element:
accept
,
alt
,
checked
,
dirname
,
formaction
,
formenctype
,
formmethod
,
formnovalidate
,
formtarget
,
height
,
maxlength
,
multiple
,
pattern
,
placeholder
,
readonly
,
required
,
size
,
src
, and
width
.
The following IDL attributes and methods do not apply to the
element:
checked
,
files
,
selectionStart
,
selectionEnd
, and
valueAsDate
IDL attributes;
select()
and
setSelectionRange()
methods.
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.
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, 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
,
value
, and
selectedOption
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
,
maxlength
,
max
,
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
,
valueAsDate
, and
valueAsNumber
IDL attributes;
select()
,
setSelectionRange()
,
stepDown()
, and
stepUp()
methods.
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
,
selectedOption
,
selectionStart
,
selectionEnd
,
valueAsDate
, and
valueAsNumber
IDL attributes;
select()
,
setSelectionRange()
,
stepDown()
, and
stepUp()
methods.
The input
event does not 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 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, 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
,
selectedOption
,
selectionStart
,
selectionEnd
,
valueAsDate
, and
valueAsNumber
IDL attributes;
select()
,
setSelectionRange()
,
stepDown()
, and
stepUp()
methods.
The input
event does not 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).
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
appropriate 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) { var x; x = path.lastIndexOf('\\'); if (x >= 0) // Windows-based path return path.substr(x+1); x = path.lastIndexOf('/'); if (x >= 0) // Unix-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
,
selectedOption
,
selectionStart
,
selectionEnd
,
valueAsDate
, and
valueAsNumber
IDL attributes;
select()
,
setSelectionRange()
,
stepDown()
, and
stepUp()
methods.
The input
event does not apply.
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
,
selectedOption
,
selectionStart
,
selectionEnd
,
valueAsDate
, and
valueAsNumber
IDL attributes;
select()
,
setSelectionRange()
,
stepDown()
, and
stepUp()
methods.
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 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 alternative button for users and
user agents who cannot use the image. The alt
attribute must also 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.
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
,
selectedOption
,
selectionStart
,
selectionEnd
,
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.
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
,
selectedOption
,
selectionStart
,
selectionEnd
,
valueAsDate
, and
valueAsNumber
IDL attributes;
select()
,
setSelectionRange()
,
stepDown()
, and
stepUp()
methods.
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
,
selectedOption
,
selectionStart
,
selectionEnd
,
valueAsDate
, and
valueAsNumber
IDL attributes;
select()
,
setSelectionRange()
,
stepDown()
, and
stepUp()
methods.