You are here:
- Manual
- Development
- Forms
- Input fields and labels
Forms: Input fields and labels
Input fields in forms are often accompanied by ‘labels’: textual explanations of what type of information the visitor is expected to enter in a specific input field.
This also applies to other form elements, like selection menus, check boxes, large text fields, et cetera. For convenience sake, in this manual these are all called input fields.
Associating labels with form fields
Some screen readers and Braille displays have difficulty associating input fields with adjacent texts. Web developers do not explicitly associate these texts with input fields in the markup: the visitor has visualise the connection himself.
Although screen readers will present texts in a linear order, followed by the input fields, the user will have to guess which field stands for which type of input. Navigating between these fields in a non-linear order may actually sometimes make it impossible to understand the form.
The label element was created for this situation. Thanks to this markup, the web developer can explicitly associate a text (or image) with an input field in a form. There are two ways of doing this.
The input field inside the label markup (HTML)
<label>Your name:
<input type=”text” ...>
</label>Separate the input field from the label markup (HTML)
<label for="name">Your name:</label>
<input id="name" type="text" ...>The latter method is very practical if the content of the form is placed in a table and the label text and the input field appear in separate cells.
Use the label element to explicitly associate text with an input field in a form.
Guideline R-pd.13.1
The web developer must make sure that the text label can only be associated with the input field by using the for attribute on the <label> tag. The web developer then uses an id attribute with a unique value on the input field (each id attribute in the source code of a page should have a unique value).
Label texts are clickable
Moreover, in a number of modern browsers, the use of label markup renders, the link text clickable. As soon as a visitor clicks on the link text, the cursor is placed on the relevant input field. As a result visitors do not have to ‘aim’ their mouse arrow all that precisely.
This functionality is consistent with the way in which people interact with their own operating systems: there they can also click on label text to place the cursor in input fields or check off check boxes.
