7.3 Labels (label)

Objectives

• Learn what the <label> element is and why it is essential in HTML forms.
• Understand how to associate <label> elements with form controls for better accessibility.
• Explore the different ways to use the <label> element in web forms.
• Practice creating accessible forms by properly using the <label> element.

Introduction to the <label> Element

The <label> element in HTML is used to define labels for form controls. Labels are essential for accessibility, as they make it easier for screen readers to identify and describe form fields. They also improve the usability of forms by allowing users to click the label to focus on the corresponding input field.

Basic Usage of <label>

The <label> element can be associated with a form control in two ways:

• By wrapping the form control within the <label> element.
• By using the for attribute to associate the label with a form control using its id attribute.

Example 1: Wrapping Form Control

<form>
    <label>Username:
        <input type="text" name="username">
    </label><br><br>

    <label>Password:
        <input type="password" name="password">
    </label><br><br>
</form>

In this example, the form controls are wrapped inside the <label> element. When the user clicks the label text, the corresponding input field is focused.

Example 2: Using the for Attribute

<form>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>

    <label for="phone">Phone Number:</label>
    <input type="tel" id="phone" name="phone"><br><br>
</form>

In this example, the for attribute of the <label> element is used to associate the label with the input field by matching it with the id attribute of the form control.

Fun Fact

Did you know? Properly using <label> elements in forms not only improves accessibility but also boosts your website's SEO. Search engines favor websites that follow accessibility best practices!

Exercises

1. Create a simple form with labels for "First Name," "Last Name," and "Email" using the for attribute.

2. Modify the form to wrap the input fields within their respective <label> elements instead of using the for attribute.

3. Add a checkbox with a label "Subscribe to newsletter" and ensure that clicking the label toggles the checkbox.

4. Create a form with a radio button group labeled "Gender," with options for "Male," "Female," and "Other." Use <label> elements to associate the labels with the radio buttons.

5. Build a form with a text area labeled "Comments." Ensure that clicking the label focuses on the text area.

Summary

• The <label> element is crucial for creating accessible and user-friendly forms.
• Labels can be associated with form controls by either wrapping them or using the for attribute.
• Using <label> elements correctly enhances the usability of forms, especially for users with assistive technologies.

By mastering the use of the <label> element, you’ll be able to create forms that are not only functional but also accessible to all users.