Labels

What is the <label> element ?

In an HTML form each input field addressed to the user must be accompanied by a label informing the object of the input.

The HTML element <label> is a specific element for forms. It allows you to formulate a title to a form field, to create text input spaces, to propose option zones to the users, etc.

Thus, an HTML form will be made up of :

• a content
• an item markup called commands (checkboxes, radio button, text input, object commands, etc.)
• a label on these commands

Why is this important ?

Labels are necessary :

• for the user because of their use by the reading wizards
• for screen readers, which need defined labels to associate each form field with a text

How to structure the <label> element ?

The label element can be associated to a control via the "for" attribute. It is a control labeled by the label element. The "for" attribute refers to the "id" attribute of the form element. In other words, an identifier (the "id" attribute) must be provided to a <input> element in order to associate the input to a <label> element. The attribute "for" is then filled in with the value of the identifier.
Finally, it is possible to directly include a <input> element in a <label> element.

Example : 

<div>
    <label for="user_email">Email</label>
    <input type="email" name="email" id="user_email">
</div>

This will allow a better ergonomy when clicking on the label to activate the field. This practice is used to adapt the content to small screens.