4.10.5 The input element

Categories:
Flow content.
Phrasing content.
If the type attribute is not in the Hidden state: Interactive content.
If the type attribute is not in the Hidden state: Listed, labelable, submittable, resettable, and reassociateable form-associated element.
If the type attribute is in the Hidden state: Listed, submittable, resettable, and reassociateable form-associated element.
If the type attribute is not in the Hidden state: Palpable content.
Contexts in which this element can be used:
Where phrasing content is expected.
Content model:
Empty.
Tag omission in text/html:
No end tag.
Content attributes:
Global attributes
accept — Hint for expected file type in file upload controls
alt — Replacement text for use when images are not available
autocomplete — Hint for form autofill feature
autofocus — Automatically focus the form control when the page is loaded
checked — Whether the command or control is checked
dirname — Name of form field to use for sending the element's directionality in form submission
disabled — Whether the form control is disabled
form — Associates the control with a form element
formactionURL to use for form submission
formenctype — Form data set encoding type to use for form submission
formmethod — HTTP method to use for form submission
formnovalidate — Bypass form control validation for form submission
formtargetBrowsing context for form submission
height — Vertical dimension
inputmode — Hint for selecting an input modality
list — List of autocomplete options
max — Maximum value
maxlength — Maximum length of value
min — Minimum value
minlength — Minimum length of value
multiple — Whether to allow multiple values
name — Name of form control to use for form submission and in the form.elements API
pattern — Pattern to be matched by the form control's value
placeholder — User-visible label to be placed within the form control
readonly — Whether to allow the value to be edited by the user
required — Whether the control is required for form submission
size — Size of the control
src — Address of the resource
step — Granularity to be matched by the form control's value
type — Type of form control
value — Value of the form control
width — Horizontal dimension
Also, the title attribute has special semantics on this element: Description of pattern (when used with pattern attribute).
DOM interface:
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 unsigned long height;
           attribute boolean indeterminate;
           attribute DOMString inputMode;
  readonly attribute HTMLElement? list;
           attribute DOMString max;
           attribute long maxLength;
           attribute DOMString min;
           attribute long minLength;
           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;
  [TreatNullAs=EmptyString] attribute DOMString value;
           attribute Date? valueAsDate;
           attribute unrestricted double valueAsNumber;
           attribute double valueLow;
           attribute double valueHigh;
           attribute unsigned long width;

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

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

  readonly attribute NodeList labels;

  void select();
           attribute unsigned long selectionStart;
           attribute unsigned long selectionEnd;
           attribute DOMString selectionDirection;
  void setRangeText(DOMString replacement);
  void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
  void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};

The input element represents a typed data field, usually with a form control to allow the user to edit the data.

The type attribute controls the data type (and associated control) of the element. It is an enumerated attribute. The following table lists the keywords and states for the attribute — the keywords in the left column map to the states in the cell in the second column on the same row as the keyword.

Keyword State Data type Control type
hidden Hidden An arbitrary string n/a
text Text Text with no line breaks A text field
search Search Text with no line breaks Search field
tel Telephone Text with no line breaks A text field
url URL An absolute URL A text field
email E-mail An e-mail address or list of e-mail addresses A text field
password Password Text with no line breaks (sensitive information) A text field that obscures data entry
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, inputmode, list, max, maxlength, min, minlength, multiple, pattern, placeholder, readonly, required, size, src, step, and width content attributes, the checked, files, valueAsDate, valueAsNumber, valueLow, valueHigh, and list IDL attributes, the select() method, the selectionStart, selectionEnd, and selectionDirection, IDL attributes, the setRangeText() and setSelectionRange() methods, the stepUp() and stepDown() methods, and the input and change events apply to an input element depends on the state of its type attribute. The subsections that define each type also clearly define in normative "bookkeeping" sections which of these feature apply, and which do not apply, to each type. The behavior of these features depends on whether they apply or not, as defined in their various sections (q.v. for content attributes, for APIs, for events).

The following table summarizes which of those content attributes, IDL attributes, methods, and events apply to each state:

Hidden Text, Search URL, Telephone E-mail 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 Yes · · · · ·
checked · · · · · · · · · · Yes · · · ·
dirname · Yes · · · · · · · · · · · · ·
formaction · · · · · · · · · · · · Yes Yes ·
formenctype · · · · · · · · · · · · Yes Yes ·
formmethod · · · · · · · · · · · · Yes Yes ·
formnovalidate · · · · · · · · · · · · Yes Yes ·
formtarget · · · · · · · · · · · · Yes Yes ·
height · · · · · · · · · · · · · Yes ·
inputmode · Yes · · Yes · · · · · · · · · ·
list · Yes Yes Yes · Yes Yes Yes Yes Yes · · · · ·
max · · · · · Yes Yes Yes Yes · · · · · ·
maxlength · Yes Yes Yes Yes · · · · · · · · · ·
min · · · · · Yes Yes Yes Yes · · · · · ·
minlength · Yes Yes Yes Yes · · · · · · · · · ·
multiple · · · Yes · · · · Yes · · Yes · · ·
pattern · Yes Yes Yes Yes · · · · · · · · · ·
placeholder · Yes Yes Yes Yes · · Yes · · · · · · ·
readonly · Yes Yes Yes Yes Yes Yes Yes · · · · · · ·
required · Yes Yes Yes Yes Yes Yes Yes · · Yes Yes · · ·
size · Yes Yes Yes Yes · · · · · · · · · ·
src · · · · · · · · · · · · · Yes ·
step · · · · · Yes Yes Yes Yes · · · · · ·
width · · · · · · · · · · · · · Yes ·
IDL attributes and methods
checked · · · · · · · · · · Yes · · · ·
files · · · · · · · · · · · Yes · · ·
valueAsDate · · · · · Yes · · · · · · · · ·
valueAsNumber · · · · · Yes Yes Yes Yes* · · · · · ·
valueLow · · · · · · · · Yes** · · · · · ·
valueHigh · · · · · · · · Yes** · · · · · ·
list · Yes Yes Yes · Yes Yes Yes Yes Yes · · · · ·
select() · Yes Yes · Yes · · · · · · · · · ·
selectionStart · Yes Yes · Yes · · · · · · · · · ·
selectionEnd · Yes Yes · Yes · · · · · · · · · ·
selectionDirection · Yes Yes · Yes · · · · · · · · · ·
setRangeText() · Yes Yes · Yes · · · · · · · · · ·
setSelectionRange() · Yes Yes · Yes · · · · · · · · · ·
stepDown() · · · · · Yes Yes Yes Yes · · · · · ·
stepUp() · · · · · Yes Yes Yes Yes · · · · · ·
Events
input event · Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes · · ·
change event · Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes · · ·

* If the multiple attribute is not specified.

** If the multiple attribute is 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 name attribute represents the element's name. The dirname attribute controls how the element's directionality is submitted. The disabled attribute is used to make the control non-interactive and to prevent its value from being submitted. The form attribute is used to explicitly associate the input element with its form owner. The autofocus attribute controls focus. The inputmode attribute controls the user interface's input modality for the control. The autocomplete attribute controls how the user agent provides autofill behavior.