HTML `<label>` Element: Enhancing Form Usability and Accessibility

Learn how to use the HTML `<label>` element to create clear and accessible captions for form elements. This tutorial explains its purpose, demonstrates associating labels with form controls using the `for` attribute and wrapping, and highlights its importance for improving user experience and accessibility, especially for users of assistive technologies.

Understanding the HTML <label> Element

What is the <label> Element?

The HTML <label> element provides a caption for various form elements like radio buttons, checkboxes, and input fields. It improves both usability and accessibility. Screen readers use labels to identify form controls, making it easier for visually impaired users to interact with forms. Labels also make it easier for all users to select form elements, particularly small ones like checkboxes and radio buttons, by expanding the clickable area.

Example:

<label for="html">HTML</label> <input type="radio" id="html" name="fav"><br>
<label for="css">CSS</label> <input type="radio" id="css" name="fav"><br>

Connecting Labels to Form Elements

To associate a label with a specific form element, use the for attribute in the <label> tag. The value of for should match the id of the form element. Alternatively, you can wrap the form element inside the label.

Browser Support

The <label> element is widely supported across all major web browsers.

<label> Attributes

The <label> element also supports standard global and event attributes.

Default CSS Styling

Most browsers style labels with a default cursor indicating it's selectable.

label {
  cursor: default;
}