<label>

The <label> element is used to create a label for a form element:

        
          
          <div class="form-row">  <label for="bread">Buy bread</label>  <input type="checkbox" name="bread" id="bread"></div>
          <div class="form-row">
  <label for="bread">Buy bread</label>
  <input type="checkbox" name="bread" id="bread">
</div>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

        
          
          <!-- Direct association with the form element (form element inside <label>) --><label>Click me <input type="text"></label><!-- Association with the form element via the for attribute --><label for="username">Click me</label><input type="text" id="username">
          <!-- Direct association with the form element (form element inside <label>) -->
<label>Click me <input type="text"></label>

<!-- Association with the form element via the for attribute -->
<label for="username">Click me</label>
<input type="text" id="username">

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Many web pages have forms — groups of interactive elements (input fields, dropdowns, checkboxes, etc.) related by a common functional purpose. Bright examples of forms include the registration form, login form, filters in catalogs. Forms are easy to use when we understand the purpose of each element. To do this, it is necessary to label each element. This is precisely what the <label> element serves.

In addition to the text label, a programmatic connection is created between the label and the form element. This significantly facilitates interaction with forms for visually impaired or blind users using screen readers. When focus is on the form element associated with the <label>, the screen reader automatically reads the label text, allowing the user to understand what data needs to be entered or what data is presented in the current form element.

To associate a <label> with a form element, there are two ways:

1. Assign the form element an id attribute. Set the same value for the for attribute of the <label>.
2. Wrap the form element in the <label> tag. In this case, the association is created automatically, and there is no need for id and for attributes.

        
          
          <form action="">  <label for="phone">Your phone:</label>  <input type="tel" name="phone" id="phone">  <label>    <input type="checkbox" name="agree">I agree to the processing of data  </label></form>
          <form action="">
  <label for="phone">Your phone:</label>
  <input type="tel" name="phone" id="phone">

  <label>
    <input type="checkbox" name="agree">I agree to the processing of data
  </label>
</form>

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

for — the value of this attribute must match the value of the id of the associated element. The first element in the document whose id matches the value of the for attribute becomes associated with our <label>. The only condition is that the element must belong to the group of associated elements: <button>, <input>, <meter>, <output>, <progress>, <select> and <textarea>.

If an element with the required id is not an associated element, the connection is not created, and even if there is an associated element later in the document with the same id, it will no longer be considered.

💡 One form element can be associated with multiple <label>, but one <label> can be associated with exactly one form element.

💡 When clicking on a <label>, the click event is also triggered on the associated form element.

💡 By default, <label> is an inline element and is styled similarly to <span> or <a>.

In practice

Copy the link "In practice"

Advice 1

Copy the link "Advice 1"

🛠 Be sure to associate <label> with checkboxes and radio buttons. These are small interface elements that can be quite difficult to hit with a mouse cursor or finger on mobile devices. If they have an associated <label>, then the user can click on the text of the label instead of aiming for the checkbox itself. Love your users! 😉

Advice 2

Copy the link "Advice 2"

🛠 Even if the designer has drawn a form that does not provide explicit labels for the elements, you still need to write them in the markup and hide them through styles. In this case, they will not be visible, but the screen reader will read them.

🛠 When the label associated with an input field or another form element is clicked, focus will be moved to that element.

+ Open