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 | Text field |
search
| Search | Text with no line breaks | Search field |
tel
| Telephone | Text with no line breaks | A text field |
url
| URL | An absolute IRI | A text field |
email
| An e-mail address or list of e-mail addresses | A text field | |
password
| Password | Text with no line breaks (sensitive information) | Text field that obscures data entry |
datetime
| Date and Time | A date and time (year, month, day, hour, minute, second, fraction of a second) with the time zone set to UTC | A date and time control |
date
| Date | A date (year, month, day) with no time zone | A date control |
month
| Month | A date consisting of a year and a month with no time zone | A month control |
week
| Week | A date consisting of a week-year number and a week number with no time zone | A week control |
time
| Time | A time (hour, minute, seconds, fractional seconds) with no time zone | A time control |
datetime-local
| Local Date and Time | A date and time (year, month, day, hour, minute, second, fraction of a second) with no time zone | A date and 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, formaction, formenctype, formmethod, formnovalidate, formtarget, height, list, max, maxlength, min, multiple, pattern, placeholder, readonly, required, size, src, step, and width content attributes, the checked, files, valueAsDate, valueAsNumber, list, and selectedOption IDL
attributes, the select() method, the selectionStart and
selectionEnd
IDL attributes, the setSelectionRange()
method, 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 following table
is non-normative and summarizes which of
those content attributes, IDL attributes, methods, and events apply
to each state:
| Hidden | Text, Search, URL, Telephone | Password | Date and Time, Date, Month, Week, Time | Local Date and 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 | · | · | · | · | · |
checked
| · | · | · | · | · | · | · | · | Yes | · | · | · | · |
formaction
| · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formenctype
| · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formmethod
| · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formnovalidate
| · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
formtarget
| · | · | · | · | · | · | · | · | · | · | Yes | Yes | · |
height
| · | · | · | · | · | · | · | · | · | · | · | Yes | · |
list
| · | Yes | Yes | · | Yes | Yes | Yes | Yes | · | · | · | · | · |
max
| · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
maxlength
| · | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
min
| · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
multiple
| · | · | Yes | · | · | · | · | · | · | Yes | · | · | · |
pattern
| · | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
placeholder
| · | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
readonly
| · | Yes | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · |
required
| · | Yes | Yes | Yes | Yes | Yes | · | · | Yes | Yes | · | · | · |
size
| · | 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 | default/on | filename | default | default | default |
valueAsDate
| · | · | · | · | Yes | · | · | · | · | · | · | · | · |
valueAsNumber
| · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
list
| · | Yes | Yes | · | Yes | Yes | Yes | Yes | · | · | · | · | · |
selectedOption
| · | Yes | Yes | · | Yes | Yes | Yes | Yes | · | · | · | · | · |
select()
| · | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
selectionStart
| · | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
selectionEnd
| · | 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 | · | · | · | · | · |
change event
| · | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · |
When an input element's type attribute changes state, and
when the element is first created, the element's rendering and
behavior must change to the new state's accordingly and the
value sanitization algorithm, if one is defined for the
type attribute's new state,
must be invoked.
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. When
it is true, the element is said to have a dirty value. 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.
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 does not have a dirty value, 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, and then invoke the
value sanitization algorithm, if the type attribute's current state
defines one.
Each input element is either mutable or immutable. 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 immutable.
When an input element does not have a
Document node as one of its ancestors (i.e. when it is
not in the document), it is immutable.
The readonly attribute can also in
some cases (e.g. for the Date state, but not the Checkbox state) make an
input element immutable.
When an input element is cloned, the element's value, dirty value flag,
checkedness, and dirty checkedness
flag must be propagated to the clone when it is created.
The form attribute is used to
explicitly associate the input element with its
form owner. The name
attribute represents the element's name. The disabled attribute is used to make
the control non-interactive and to prevent its value from being
submitted. The autofocus
attribute controls focus.
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, autocomplete, max, min, multiple, pattern, placeholder, required, size, src, step, and type IDL attributes must
reflect the respective content attributes of the same
name. The maxLength IDL
attribute must reflect the maxlength content attribute,
limited to only non-negative numbers. 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 willValidate, validity, and validationMessage
attributes, and the checkValidity() and setCustomValidity()
methods, are part of the constraint validation API. The
labels attribute provides a list
of the element's labels. The select(), selectionStart,
selectionEnd,
and setSelectionRange()
methods and attributes expose the element's text selection.
type attributeThe 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,
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.
When an input element's type attribute is in the Text state or the Search 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 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.
If the element is mutable, its value should be editable by the user. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the element's value.
The value attribute, if
specified, must have a value that contains no U+000A LINE FEED (LF)
or U+000D CARRIAGE RETURN (CR) characters.
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,
list,
maxlength,
pattern,
placeholder,
readonly,
required, and
size content attributes;
list,
selectedOption,
selectionStart,
selectionEnd, and
value IDL attributes;
select() and
setSelectionRange() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
max,
min,
multiple,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
The input element represents a control
for editing a telephone number given in the element's value.
If the element is mutable, its value should be editable by the user. User agents may change the punctuation of values that the user enters. User agents must not allow users to insert U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the element's value.
The value attribute, if
specified, must have a value that contains no U+000A LINE FEED (LF)
or U+000D CARRIAGE RETURN (CR) characters.
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 setCustomValidity() method
to hook into the client-side validation mechanism.
The following common input element content
attributes, IDL attributes, and methods apply to the element:
autocomplete,
list,
maxlength,
pattern,
placeholder,
readonly,
required, and
size content attributes;
list,
selectedOption,
selectionStart,
selectionEnd, and
value IDL attributes;
select() and
setSelectionRange() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
max,
min,
multiple,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
The input element represents a control
for editing a single absolute URL given in the
element's value.
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 a 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 U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value.
The value attribute, if
specified, must have a value that is a valid absolute URL.
The value sanitization algorithm is as follows: Strip line breaks from the value.
Constraint validation: While the value of the element is not 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,
pattern,
placeholder,
readonly,
required, and
size content attributes;
list,
selectedOption,
selectionStart,
selectionEnd, and
value IDL attributes;
select() and
setSelectionRange() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
max,
min,
multiple,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
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://www.ietf.org/rfc/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 URIs in this sample consist of the four URIs in the author-specified list that match the text the user has entered, sorted lexically. Note how the UA is using the knowledge that the values are URIs to allow the user to omit the scheme part and perform intelligent matching on the domain name.
The last two URIs (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.
The input element represents a control
for editing a list of e-mail addresses given in the element's value.
If the element is mutable,
the user agent should allow the user to change the e-mail addresses
represented by its value. If
the multiple attribute is
specified, then the user agent should allow the user to select or
provide multiple addresses; otherwise, the user agent should act in
a manner consistent with expecting the user to provide a single
e-mail address. User agents may allow the user to set the value to a string that is not a
valid e-mail address list. User agents should allow the
user to set the value to the
empty string. User agents must not allow users to insert U+000A LINE
FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value. User agents may transform the
value for display and editing
(e.g. converting punycode in the value to IDN in the display and vice
versa).
If the multiple
attribute is specified on the element, then the value attribute, if specified, must
have a value that is a valid e-mail address list;
otherwise, the value
attribute, if specified, 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.
Constraint validation: If the multiple attribute is specified
on the element, then, while the value of the element is not a
valid e-mail address list, the element is
suffering from a type mismatch; otherwise, while the
value of the element is not a
single valid e-mail address, the element is
suffering from a type mismatch.
A 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, the user agent must split the string on commas.
A valid e-mail address is a string that matches the
ABNF production 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str )
where atext is defined in RFC 5322 section
3.2.3, and ldh-str is defined in RFC 1034
section 3.5. [ABNF] [RFC5322] [RFC1034]
This requirement is a willful violation of RFC 5322, which defines a syntax for e-mail addresses that is simultaneously too strict (before the "@" character), too vague (after the "@" character), and too lax (allowing comments, white space characters, and quoted strings in manners unfamiliar to most users) to be of practical use here.
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,
selectedOption,
selectionStart,
selectionEnd, and
value IDL attributes;
select() and
setSelectionRange() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
max,
min,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
The input element represents a 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 U+000A LINE FEED (LF) or U+000D CARRIAGE RETURN (CR) characters into the value.
The value attribute, if
specified, must have a value that contains no U+000A LINE FEED (LF)
or U+000D CARRIAGE RETURN (CR) characters.
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,
pattern,
placeholder,
readonly,
required, and
size content attributes;
selectionStart,
selectionEnd, and
value IDL attributes;
select(), and
setSelectionRange() methods.
The value IDL attribute is
in mode value.
The input and change events apply.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
checked,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
list,
max,
min,
multiple,
src,
step, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
list,
selectedOption,
valueAsDate, and
valueAsNumber IDL attributes;
stepDown() and
stepUp() methods.
When an input element's type attribute is in the Date and 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 global date and
time. User agents may display the date and
time in whatever time zone is appropriate for the user.
If the element is mutable, the user agent should allow the user to change the global date and time represented by its value, as obtained by parsing a global date and time from it. User agents must not allow the user to set the value to a string that is not a valid global date and time string expressed in UTC, though user agents may allow the user to set and view the time in another time zone and silently translate the time to and from the UTC time zone in the value. If the user agent provides a user interface for selecting a global date and time, then the value must be set to a valid global date and time string expressed in UTC representing the user's selection. User agents should allow the user to set the value to the empty string.
The value attribute, if
specified, must have a value that is a valid global date and
time string.
The value sanitization algorithm is as follows: If the value of the element is a valid global date and time string, then adjust the time so that the value represents the same point in time but expressed in the UTC time zone, otherwise, set it to the empty string instead.
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 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 global date and 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 global date and time 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 the parsed global date and time, ignoring leap
seconds.
The algorithm to convert a
number to a string, given a number input,
is as follows: Return a valid global date and time
string expressed in UTC that represents the global date and time that is 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 global date and time
from input results in an error, then return an
error; otherwise, return a Date object representing the
parsed global date and time,
expressed in UTC.
The algorithm to convert a
Date object to a string, given a
Date object input, is as
follows: Return a valid global date and time
string expressed in UTC that represents the global date and time 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,
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,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
placeholder,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart, and
selectionEnd IDL attributes;
select() and
setSelectionRange() methods.
The following fragment shows part of a calendar application. A user can specify a date and time for a meeting (in his local time zone, probably, though the user agent can allow the user to change that), and since the submitted data includes the time-zone offset, the application can ensure that the meeting is shown at the correct time regardless of the time zones used by all the participants.
<fieldset> <legend>Add Meeting</legend> <p><label>Meeting name: <input type=text name="meeting.label"></label> <p><label>Meeting time: <input type=datetime name="meeting.start"></label> </fieldset>
Had the application used the datetime-local type
instead, the calendar application would have also had to explicitly
determine which time zone the user intended.
The input element represents a control
for setting the element's value to a string representing a
specific date.
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 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.
The value attribute, if
specified, 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 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 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
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,
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,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
placeholder,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
selectionStart, and
selectionEnd IDL attributes;
select() and
setSelectionRange() methods.
The input element represents a control
for setting the element's value to a string representing a
specific month.
If the element is mutable, the user agent should allow the user to change the month represented by its value, as obtained by parsing a month from it. User agents must not allow the user to set the value to a string that is not a valid month string. If the user agent provides a user interface for selecting a month, then the value must be set to a valid month string representing the user's selection. User agents should allow the user to set the value to the empty string.
The value attribute, if
specified, must have a value that is a valid month
string.
The value sanitization algorithm is as follows: If the value of the element is not a valid month string, then set it to the empty string instead.
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 step scale factor is 1
(there is no conversion needed as the algorithms use months).
The default step is
1 month.
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest month 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 month from input results in an error, then return an error; otherwise, return the number of months between January 1970 and the parsed month.
The algorithm to convert a number to a string, given a number input, is as follows: Return a valid month string that represents the month that has input months between it and January 1970.
The algorithm to convert a
string to a Date object, given a string input, is as follows: If parsing a month from input results in an error, then return an error;
otherwise, return a Date object representing midnight
UTC on the morning of the first day of the parsed month.
The algorithm to convert a
Date object to a string, given a
Date object input, is as
follows: Return a valid month string that
represents the month 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,
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,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
placeholder,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart, and
selectionEnd IDL attributes;
select() and
setSelectionRange() methods.
The input element represents a control
for setting the element's value to a string representing a
specific week.
If the element is mutable, the user agent should allow the user to change the week represented by its value, as obtained by parsing a week from it. User agents must not allow the user to set the value to a string that is not a valid week string. If the user agent provides a user interface for selecting a week, then the value must be set to a valid week string representing the user's selection. User agents should allow the user to set the value to the empty string.
The value attribute, if
specified, must have a value that is a valid week
string.
The value sanitization algorithm is as follows: If the value of the element is not a valid week string, then set it to the empty string instead.
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 step scale factor is
604,800,000 (which converts the weeks to milliseconds, as used in
the other algorithms). The default step is 1
week.
When the element is suffering from a step mismatch, the user agent may round the element's value to the nearest week 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 week string 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 Monday of the parsed week, ignoring leap seconds.
The algorithm to convert a
number to a string, given a number input,
is as follows: Return a valid week string that
represents the week 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 week from input
results in an error, then return an error; otherwise, return a
Date object representing midnight UTC on the morning of
the Monday of the parsed week.
The algorithm to convert a
Date object to a string, given a
Date object input, is as
follows: Return a valid week string that
represents the week 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,
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,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
placeholder,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart, and
selectionEnd IDL attributes;
select() and
setSelectionRange() methods.
The input element represents a control
for setting the element's value to a string representing a
specific time.
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 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.
The value attribute, if
specified, 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 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 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
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,
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,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
placeholder,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart, and
selectionEnd IDL attributes;
select() and
setSelectionRange() methods.
When an input element's type attribute is in the Local Date and 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
local date and time,
with no time-zone offset information.
If the element is mutable, the user agent should allow the user to change the date and time represented by its value, as obtained by parsing a date and time from it. User agents must not allow the user to set the value to a string that is not a valid local date and time string. If the user agent provides a user interface for selecting a local date and time, then the value must be set to a valid local date and time string representing the user's selection. User agents should allow the user to set the value to the empty string.
The value attribute, if
specified, must have a value that is a valid local date and
time string.
The value sanitization algorithm is as follows: If the value of the element is not a valid local date and time string, then set it to the empty string instead.
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 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 local date and 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 date and time from input results in an error, then return an error;
otherwise, return the number of milliseconds elapsed from midnight
on the morning of 1970-01-01 (the time represented by the value
"1970-01-01T00:00:00.0") to the parsed local date and time, ignoring
leap seconds.
The algorithm to convert a
number to a string, given a number input,
is as follows: Return a valid local date and time
string that represents the date and time that is input milliseconds after midnight on the morning of
1970-01-01 (the time represented by the value "1970-01-01T00:00:00.0").
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,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
height,
maxlength,
multiple,
pattern,
placeholder,
size,
src, and
width.
The following IDL attributes and methods do not apply to the
element:
checked,
files,
selectionStart,
selectionEnd, and
valueAsDate IDL attributes;
select() and
setSelectionRange() methods.
The following example shows part of a flight booking
application. The application uses an input element
with its type attribute set to
datetime-local,
and it then interprets the given date and time in the time zone of
the selected airport.
<fieldset> <legend>Destination</legend> <p><label>Airport: <input type=text name=to list=airports></label></p> <p><label>Departure time: <input type=datetime-local name=totime step=3600></label></p> </fieldset> <datalist id=airports> <option value=ATL label="Atlanta"> <option value=MEM label="Memphis"> <option value=LHR label="London Heathrow"> <option value=LAX label="Los Angeles"> <option value=FRA label="Frankfurt"> </datalist>
If the application instead used the datetime type, then the
user would have to work out the time-zone conversions himself,
which is clearly not a good user experience!
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 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.
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 the empty string instead.
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 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 may round the element's value to the nearest number 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 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,
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,
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.
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.
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 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.
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.
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,
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,
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.
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.
The value attribute, if
specified, 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, 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,
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.
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 change at the element, then broadcast formchange events at the
element's form owner.
Constraint validation: If the element is required and its checkedness is false, then the element is suffering from being missing.
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,
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.
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 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.
When any of the following events occur, if the element's checkedness state is true after the event, the checkedness state of all the other elements in the same radio button group must be set to false:
name
attribute is added, removed, or changes value.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 change at the element, then broadcast formchange events at the
element's form owner.
Constraint validation: If the element 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 change event applies.
The following content attributes must not be specified and do not
apply to the element:
accept,
alt,
autocomplete,
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.
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).
If the element is mutable, the user agent should allow the user to change the files on the list, e.g. adding or removing files. 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.
Constraint validation: If the element is required and the list of selected files is empty, then the element is suffering from being missing.
Unless the multiple
attribute is set, there must be no more than one file in the list of
selected
files.
The accept
attribute may be specified to provide user agents with a hint of
what file types the server will be able to accept.
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). To obtain the list of tokens from the attribute, the user agent must split the attribute value on commas.
User agents should prevent the user from selecting files that are not accepted by one (or more) of these tokens.
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,
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.
When an input element's type attribute is in the Submit Button state, the rules
in this section apply.
The input element represents a button
that, when activated, submits the form. If the
element has a value attribute,
the button's label must be the value of that attribute; otherwise,
it must be an implementation-defined string that means "Submit" or
some such. The element is a button, specifically a submit button.
If the element is mutable, the user agent should allow the user to activate the element.
The element's activation behavior, if the element
has a form owner, is to submit the form
owner from the input element; otherwise, it is
to do nothing.
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,
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.
When an input element's type attribute is in the Image Button state, the rules
in this section apply.
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 referencing a
non-interactive, optionally animated, image resource that is neither
paged nor scripted.
When any of the following events occur, unless the user agent
cannot support images, or its support for images has been disabled,
or the user agent only fetches elements on demand, or the src attribute's value is the empty
string, the user agent must resolve the value of the src attribute, relative to the
element, and if that is successful, must fetch the
resulting absolute URL:
input element's type attribute is first set to the
Image Button state
(possibly when the element is first created), and the src attribute is present.input element's type attribute is changed back to
the Image Button state,
and the src attribute is
present, and its value has changed since the last time the type attribute was in the Image Button state.input element's type attribute is in the Image Button state, and the
src attribute is set or
changed.Fetching the image must delay the load event of the element's document until the task that is queued by the networking task source once the resource has been fetched (defined below) has been run.
If the image was successfully obtained, with no network errors, and the image's type is a supported image type, and the image is a valid image of that type, then the image is said to be available. If this is true before the image is completely downloaded, each task that is queued by the networking task source while the image is being fetched must update the presentation of the image appropriately.
The user agents should apply the image sniffing rules to determine the type of the image, with the image's associated Content-Type headers giving the official type. If these rules are not applied, then the type of the image must be the type given by the image's associated Content-Type headers.
User agents must not support non-image resources with the
input element. User agents must not run executable code
embedded in the image resource. User agents must only display the
first page of a multipage resource. User agents must not allow the
resource to act in an interactive fashion, but should honor any
animation in the resource.
The task that is queued by the networking task
source once the resource has been fetched, must, if the download was successful
and the image is available,
queue a task to fire a simple event named
load at the input
element; and otherwise, if the fetching process fails without a
response from the remote server, or completes but the image is not a
valid or supported image, queue a task to fire a
simple event named error on
the input element.
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.