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

formaction — URL 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

formtarget — Browsing 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.

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:

* 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.