Input

Selector

input[type="text"]

Inputs are used to gather data from the user. To maintain clarity, make sure that the input has a visible label. If the visible label uses the label tag, you can take advantage of the for attribute to link them semantically. Otherwise, use aria-labelledby to link the two together.

States

While both disabled and readonly inputs block the user from editing the text, the disabled attribute completely prevents the user from interacting with the control. readonly inputs allow the user to focus and select the text within the field. Additionally, the value of disabled inputs does not get sent on form submission, while the value of readonly inputs do.

Fields will receive a red border and warning icon when invalid through the :invalid pseudo-state. In most cases, the browser will automatically mark the field as invalid when using built in form validation, but it can also be triggered manually by applying aria-invalid="true" to the input. While inputs are considered to be valid when not invalid, sometimes you may want to explicity communicate that the input value is valid. This might be useful if the field validation is particularly complex, for example.

When using aria-invalid="true", make sure to help the user in identifying the error (S.C 3.3.1). This can be done by providing text under the input that is linked with aria-describedby.