What is the label element in HTML5 with examples?

The label element in HTML5 is used to associate a text label with a form control, providing context to the user about the expected input. This association is critical for accessibility, as screen readers use labels to help low-vision users understand and fill out forms. Furthermore, when a label is associated with a form control, clicking on the label will often focus on or activate the associated control, making forms easier to use.

The <label> element can be used in two primary ways to associate with a form control:

Clear Association using the for attribute: In this method, the <label> element is separate from the form control. The for attribute of the <label> is set to the id attribute of the form control it is proposed to label. The id attribute of the form control must be unique within the HTML document. This approach offers more flexibility in page layouts.

<form>
  <input type="checkbox" id="agree" name="terms">
  <label for="agree">I agree to the terms and conditions</label>
</form>

In this example, the <label> with the for=”agree” attribute is clearly linked to the <input type=”checkbox” element that has the id=”agree”. Clicking on the text “I agree to the terms and conditions” will toggle the checkbox.

Another example with a text input:

<form method="post" action="http://titan:8080/form">
  <p><label for="fave">Fruit: <input id="fave" name="fave"/></label></p>
  <p><label for="name">Name: <input id="name" name="name"/></label></p>
  <button>Submit Vote</button>
</form>

Here, the label “Fruit:” is associated with the input field having id=”fave” through the for attribute. Similarly, “Name:” is associated with the input having id=”name”.

Implied Association by Wrapping the Form Control: The <label> element can directly enclose both the text label and the form control. In this case, the for attribute is not strictly necessary, although it can still be used.

<form>
  <label>
    <input type="radio" name="gender" value="male"> Male
  </label>
  <label>
    <input type="radio" name="gender" value="female"> Female
  </label>
</form>

Here, each <label> element wraps a radio button and its corresponding text. Clicking either the radio button or the text will select the option.

<label> element and the for attribute

• The for attribute of the <label> must match the id attribute of the associated form control. This id should be unique on the page.
• Using the for and id attributes provides more flexibility in structuring forms compared to directly wrapping the control within the label. This is particularly useful in complex layouts, such as those involving tables.
• For form fields of type=”hidden”, you should not include <label> elements.
• A <label> element can be associated with more than one form control by creating multiple <label> elements with the same for value.
• In HTML5, the <label> element also has a form attribute. This attribute allows you to associate a label with a form control that is not a successor of the same form. The value of the form attribute should be the id of the relevant <form> element.

<form id="myForm">
  <input type="text" id="username" name="username">
</form>
<label for="username" form="myForm">Your Username:</label>

In this example, the label is placed outside the <form> element but is still associated with the input field inside the form using the for and form attributes.

By correctly using the <label> element and its for attribute, you can create more accessible and user-friendly HTML forms.

HTML5 Topics