Synonyms: Text field, edit, input, input field, text box, one-line plain text edit control
Input fields allow for the inputting and editing of characters (numbers, letters, special characters) (see DIN EN ISO 9241-161: 8.12).
An input field is usually a rectangular area of the page that contrasts with its surroundings due to a border, a line or a different background color, for example. The input field can contain further control elements which are related to the value input.
|The text in the input field must have a contrast of at least 4.5:1.
|EN 301 549: 22.214.171.124, 126.96.36.199
|The border or line of the input field must have a contrast ratio of at least 3:1 with respect to the background of the page or the input field.
Alternatively, the contrast ratio between the background color of the page and the input field must be at least 3:1.
|EN 301 549: 188.8.131.52, 184.108.40.206
|The input field must have a visible label (see Label
|EN 301 549 220.127.116.11, 18.104.22.168
|The label should not be located in the input field, so that it is visible at all times and cannot be confused with a value.
|DIN EN ISO 9241-125: 5.1.14
|If the input field receives the keyboard focus, the focus indicator must be visible (see Focus indicatorText cursor
|Use of the keyboard
|It must be possible to access, operate and exit the input field with the keyboard (see Use of the keyboard table, below).
|22.214.171.124, 126.96.36.199, 188.8.131.52, 184.108.40.206
|Use of the keyboard
|If the input field contains other interactive elements such as buttons, these must receive the focus with the tab key after the input field. @- Note: This does not apply to interactive elements for which a generally known use of the keyboard is implemented, such as a button for deleting the inputs in the input field. Nor does this apply to elements for which a keyboard shortcut was implemented, insofar as this keyboard shortcutchange of contextUse of the pointing device
Use of the keyboard: input fieldPermalink "Use of the keyboard: input field"
|Focusing of the input field
|Exiting the input field
|Entering a value
|[Inputting of printable characters]
Note: If certain characters cannot be entered, an appropriate implicit or explicit input instruction must be available at the input field. An implicit input instruction might, for example, be the “phone number” label which indicates that no letters can be entered.
|Navigating in the input field
|Deleting text in the input field
|Highlighting text in the input field
|SHIFT+[any navigation key],
|Removing the highlighting
|[any navigation key]
|Pasting of text from the clipboard
|Copying or cutting highlighted text
Use of the pointing device: input fieldPermalink "Use of the pointing device: input field"
|Placing the focus on a specific position in the input field
|Left click in the input field
|Placing the focus in the input field
|Left click on the label
|Highlighting text in the input field
|Drag with the left mouse button pressed
|Highlighting a word in the input field
|Highlighting all content in the input field
|The input field role must be communicated to the Accessibility API (see Accessibility API](https://www.w3.org/TR/WCAG21/#input-purposes).
|EN 301 549: 220.127.116.11, 18.104.22.168.1
|The value of the input field must be communicated to the Accessibility API (see Accessibility API).
|EN 301 549: 22.214.171.124, 126.96.36.199, 188.8.131.52
|The status of the input field must be communicated to the Accessibility API (see Element statusFocus indicator
Practical tip: one-line input field in Web applicationsPermalink "Practical tip: one-line input field in Web applications"
Screen reader outputPermalink "Screen reader output"
- JAWS: [label] input field [value] [instruction on text input]
- NVDA: [label] input field [value]
- Windows Narrator: [label] edit [value]
The input field should be implemented with the HTML element
For an input field which is used for entering search terms,
<input type=search> can be used. The screen readers output the search field as a normal input field, i.e. the label must indicate the purpose which is the search.
The initial value is communicated through the
The label of the input field should be linked to the input field with the
<label for=ID> element. The maximum and minimum required length of the value can be determined with
minlength. Neither of the values are perceptible visually or with the use of assistive technology. If they are used, a corresponding instruction should be provided at the input field.
If a particular input format is required, instead of
<input type=text>, the following elements can be used:
<input type=tel>for telephone numbers,
<input type=email>for email addresses,
<input type=url>for Internet addresses,
<input type=text pattern=…>or inputs that must correspond to the regular expression in the
<input type=number>for numbers (see Spin button ),
<input type=time>etc. for date and time information (see Date picker ).
These input fields with a predefined format are automatically validated by the browser. The error messages of the browsers, however, are not accessible, and should therefore be replaced or supplemented with specific error messages from the application (see also: Browser validation of the
required required attribute in
Practical tip: programmatic label of required fields in Web applications
The input fields for telephone numbers, email and Internet addresses as well as input fields with the
pattern attribute are not identifiable either visually or with assistive technology – they are displayed as normal input fields and/or output by the screen reader. They must therefore be labeled in an expressive way and should also have operating instructions for the required input format.
inputmode attribute can be used to specify which virtual keyboard should be displayed on mobile devices because corresponding details are expected (e.g. inputting of numbers, text, URLs, email addresses). The use of
inputmode does not result in an automatic browser validation. Insofar as the keyboard that is used does not result from the
type attribute of the input field, the use of
inputmode is recommended, as assistive technology is also able to use this information appropriately, to display corresponding virtual keyboards, for example. It should be noted that the
inputmode attribute replaces unnecessary input instructions, however.
placeholder attribute can be used for a placeholder. However, it is recommended to display input instructions next to the field and to link them to the input field using
placeholder attribute has the following disadvantages:
- The contrasts are often insufficient (in respect to either the background or the text in the input field, which makes it difficult to distinguish between the placeholder and the value).
- The placeholder is not displayed as soon as the field contains a value.
An input field can be marked as disabled (
disabled) and read-only (
An input field can be marked as a required field with
Further information: 4.10.5 The input element - HTML Standard (whatwg.org)
If the input field is not implemented with the HTML element, it is also necessary to take account of the following:
- The role is communicated with
- For an input field which is used for entering search terms,
role=searchboxcan be used. The screen readers output the search field as a normal input field, i.e. the label must indicate the purpose which is the search.
- The labeling of the input field can take place with
- The value of the input field is derived from the text content of the element which is marked with
- The input field can be marked as a required field with
aria-required, as disabled with
aria-disabled, and as read-only with
- For a placeholder,
- The presentation of the input field should be verified in Windows High Contrast mode.
- The visible input field and the programmatically focused element should have the same position and size.
Information about this article
You are welcome to send feedback by email about our handout!