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:

  1. Use the <label> tag for each form name.
  2. Add the for attribute to each <label> tag and an id attribute on each form field.
  3. Populate the for and id 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

Comments

Add a comment

Required fields are marked *.

Back to top