jump
input elementtype attribute is not in the Hidden state: Interactive content.type attribute is not in the Hidden state: Listed, labelable, submittable, and resettable form-associated element.type attribute is in the Hidden state: Listed, submittable, and resettable form-associated element.acceptaltautocompleteautofocuscheckeddirnamedisabledformformactionformenctypeformmethodformnovalidateformtargetheightlistmaxmaxlengthminmultiplenamepatternplaceholderreadonlyrequiredsizesrcsteptypevaluewidth
interface HTMLInputElement : HTMLElement {
attribute DOMString accept;
attribute DOMString alt;
attribute DOMString autocomplete;
attribute boolean autofocus;
attribute boolean defaultChecked;
attribute boolean checked;
attribute DOMString dirName;
attribute boolean disabled;
readonly attribute HTMLFormElement form;
readonly attribute FileList files;
attribute DOMString formAction;
attribute DOMString formEnctype;
attribute DOMString formMethod;
attribute boolean formNoValidate;
attribute DOMString formTarget;
attribute DOMString height;
attribute boolean indeterminate;
readonly attribute HTMLElement list;
attribute DOMString max;
attribute long maxLength;
attribute DOMString min;
attribute boolean multiple;
attribute DOMString name;
attribute DOMString pattern;
attribute DOMString placeholder;
attribute boolean readOnly;
attribute boolean required;
attribute unsigned long size;
attribute DOMString src;
attribute DOMString step;
attribute DOMString type;
attribute DOMString defaultValue;
attribute DOMString value;
attribute Date valueAsDate;
attribute double valueAsNumber;
readonly attribute HTMLOptionElement selectedOption;
attribute DOMString width;
void stepUp(in optional long n);
void stepDown(in optional long n);
readonly attribute boolean willValidate;
readonly attribute ValidityState validity;
readonly attribute DOMString validationMessage;
boolean checkValidity();
void setCustomValidity(in DOMString error);
readonly attribute NodeList labels;
void select();
attribute unsigned long selectionStart;
attribute unsigned long selectionEnd;
attribute DOMString selectionDirection;
void setSelectionRange(in unsigned long start, in unsigned long end, in 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 |
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, dirname, 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, selectionEnd, and selectionDirection, 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 summarizes which of those content attributes, IDL attributes, methods, and events apply to each state:
| 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 | Yes | · | · | · | · | · |
checked |
· | · | · | · | · | · | · | · | · | Yes | · | · | · | · |
dirname |
· | 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 | Yes | · | · | · | · | · |
max |
· | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
maxlength |
· | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
min |
· | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
multiple |
· | · | · | Yes | · | · | · | · | · | · | Yes | · | · | · |
pattern |
· | Yes | Yes | Yes | Yes | · | · | · | · | · | · | · | · | · |
placeholder |
· | 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 | · | · | · |
valueAsDate |
· | · | · | · | · | Yes | · | · | · | · | · | · | · | · |
valueAsNumber |
· | · | · | · | · | Yes | Yes | Yes | · | · | · | · | · | · |
list |
· | Yes | Yes | Yes | · | Yes | Yes | Yes | Yes | · | · | · | · | · |
selectedOption |
· | Yes | Yes | Yes† | · | Yes | Yes | Yes | Yes | · | · | · | · | · |
select() |
· | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
selectionStart |
· | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
selectionEnd |
· | Yes | Yes | · | Yes | · | · | · | · | · | · | · | · | · |
selectionDirection |
· | 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 | · | · | · | · | · |
change event |
· | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | Yes | · | · | · |
† The dagger symbol (†) indicates that the feature only applies when the multiple attribute is not specified.
The value content attribute gives the default value of the input element.
The checked content attribute is a boolean attribute that gives the default checkedness of the input element.
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, 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 autocomplete and type IDL attributes must reflect the respective content attributes 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.