7.1. Use the <label>
tag with the for
and id
attributes to label form fields with a visible name
To label fields with a visible name:
- Use the
<label>
tag for each form name. - Add the
for
attribute to each<label>
tag and anid
attribute on each form field. - Populate the
for
andid
attributes of each name/field pair with the same, unique value.
<label for="name">Your last name</label> <input type="text" id="name" name="name" autocomplete="family-name" />
<label for="country">Your country</label> <select id="country" name="country" autocomplete="country-name"> <option value="belgium">Belgium</option> <option value="france">France</option> […] </select>
Note
It is important to provide identical names for fields that have the same function.
For example, if there are several identification forms on the website, do not use “ID” on one, and “Login” on the other.
Find out more
- Associating labels explicitly.
- Floated labels: