Input
Description
The input element performs most of the tasks in forms. In general, there is only the HTML element input for this purpose, which can, however, have various variants due to the type attribute. With <input type="submit"> or <input type="button"> there are even variants that are not a text input field at all, but a button and should be designed as such. There also are types like checkbox, option, range, date and many more that look and behave unique in their way.
For all fields that require a text input, we should use the placeholder attribute and provide a short explanation or an example text here.
While checkbox and radio have their own labeling styles (more on this later), text entries can do without labels if they have a meaningful placeholder. If they come with a label, this is usually above the input field and has our label formatting.
Usage
Use clear and descriptive labels where possible: Each <input> element of type text, password, and search should have an associated <label> that describes its purpose clearly. Ensure the for attribute of the label matches the id of the <input> to support screen reader users.
Placeholder text: Use placeholder text to provide examples or hints about the expected input, but not as the only means of providing instructions due to its temporary nature and potential accessibility issues. Especially in those rare cases, where you don't use a label, resort to placeholder text and give the <input> a propper name and a "speaking" id.
Ensure Visible Focus Indicators: Focus states should be clearly visible to aid keyboard navigation, ensuring that users can easily identify which element has focus.
Error Identification: Provide immediate, clear feedback for errors in input fields. Use ARIA aria-invalid="true" to mark fields with validation errors and provide descriptive error messages linked to the field with aria-describedby.
Security for Password Fields: For password inputs, include options to toggle visibility so users can confirm their entered information. Ensure this feature is accessible, allowing users to interact with it via keyboard and screen readers. Make sure copy & paste works in password fields.
Search Field Accessibility: For search inputs, ensure there is a submit button labeled with a clear action word like "Search" to allow users to activate the search manually. This is particularly helpful for screen reader and keyboard-only users.
Contrast and Visibility: Text fields, labels, and instructional text, should meet minimum contrast ratios to be easily distinguishable by users with visual impairments.
Accessible Help and Instructions: If specific formats or complex data are required, provide accessible instructions or help text, ensuring users understand how to correctly fill in these fields.
Example
<input>
This is the standard input field, and even if no special type is specified, it is this type of input field. This formatting is also used for input fields with the type attribute text, email, number, tel and url.
Input with label
Input with error
Please fill this field
<input type="search">
There is a corresponding icon in our search input field.
In the Webkit and Blink (Chromium) browsers, a small cancel button is displayed to quickly empty the field. This has of course to be designed according to our specifications. For accessibility reasons, however, this should not be replicated in other browsers.
<input type="password">
Passwords are of course hidden. However, we give our users the convenience feature of displaying them. This is controlled via an eye icon.