Table of contents

Introduction

HTML Inputs and Labels

2.1.

Example:

Syntax

Attribute Value

4.1.

Key Points:

4.2.

Example:

Supported Tags

HTML <label> Tag Examples

6.1.

Example 1: Basic Text Input

6.2.

Example 2: Checkbox

6.3.

Example 3: Radio Buttons

6.4.

Example 4: Dropdown Menu

Supported Browsers

7.1.

Accessibility Considerations

Frequently Asked Questions

8.1.

What is the purpose of the <label> tag in HTML?

8.2.

How do you link a <label> to an input field?

8.3.

Can the <label> tag be applied to all types of input fields?

Conclusion

Last Updated: Dec 20, 2024

Easy

HTML <label> Tag

Author Gaurav Gandhi

Do you think IIT Guwahati certified course can help you in your career?

Yes

Introduction

The <label> tag in HTML is used to define a label for an input element. This tag improves accessibility and usability, especially in forms. It allows the user to click on the label to focus on the associated input field.

HTML Inputs and Labels

In HTML, forms are very important to collect information from the user. Many times, input fields go along with the <label> tag to make user-friendly forms. The <label> tag describes the input element to help users know what kind of information is required from them.

When a label is assigned to an input field, clicking on the label will focus on the input field. This is especially helpful for improving the user experience of websites. It also makes the form accessible for people with disabilities who may use screen readers.

Example:

<label for="name">Enter your name:</label>
<input type="text" id="name" name="username">

Here, clicking the "Enter your name" label will set the focus of the input field where users enter their name.

Syntax

The basic syntax of the <label> tag is very simple.

<label for="id">Label Text</label>

for="id": This attribute links the label to an input field. The id of the input element must match the for attribute of the <label>.
Label Text: This is the text that will be displayed next to the input element.

Example:

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

Here, the label "Email Address" is connected with the input field in which the user is supposed to type in his email address. On clicking the label it will focus on the input field.

Attribute Value

The for attribute is crucial for the <label> tag to link to an input field. This attribute allows users to click on the label to focus on the corresponding input field, which improves usability.

Key Points:

The value of the for attribute must match the id of the input element.
This is particularly important for accessibility, because it ensures screen readers will announce which label corresponds to which input field.

Example:

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

Clicking on "Phone Number" will highlight the input field to enter a phone number.

Supported Tags

The <label> element can be combined with many of the input elements, including:

<input> – for text fields, checkboxes, radio buttons, etc.
<textarea> – for longer text inputs.
<select> – for dropdown menus.
<button> – for buttons (though this is not very common).

The most common use of the <label> tag is with the <input> element, especially for forms.

HTML <label> Tag Examples

Let's look at some practical examples of how to use the <label> tag.

Example 1: Basic Text Input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Username Input Example</title>
</head>
<body>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">
</body>
</html>

Output

In this example, the label "Username" is linked to the text input field. Clicking on the label will focus on the input field.

Example 2: Checkbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Username Input Example</title>
</head>
<body>
<label for="agree">
  <input type="checkbox" id="agree" name="agree"> I agree to the terms and conditions
</label>   
</body>
</html>

Output

In this example, the label contains a checkbox. Clicking the label will check or uncheck the checkbox, which enhances the user experience.

Example 3: Radio Buttons

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Username Input Example</title>
</head>
<body>
<label for="male">
  <input type="radio" id="male" name="gender"> Male
</label>
<label for="female">
  <input type="radio" id="female" name="gender"> Female
</label> 
</body>
</html>

Output

Here, we use the <label> tag with radio buttons. Each label is associated with a corresponding radio button.

Example 4: Dropdown Menu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Username Input Example</title>
</head>
<body>
<label for="country">Select your country:</label>
<select id="country" name="country">
  <option value="india">India</option>
  <option value="usa">USA</option>
  <option value="uk">UK</option>
</select>
</body>
</html>

Output

In this example, the label is associated with a dropdown menu, which allows users to select a country.

Supported Browsers

The <label> tag is supported by all modern browsers, including:

Google Chrome
Mozilla Firefox
Safari
Microsoft Edge
Opera

Older browsers such as Internet Explorer (IE 6 and above) also support the <label> tag, making it widely accessible across different platforms and devices.

Accessibility Considerations

The <label> tag is used properly for accessibility. When properly associated with an input field using the for attribute, users with disabilities can navigate your forms more easily. Screen readers will read out label text when the input field is focused, so users have a better idea of the purpose of each input field.

Frequently Asked Questions

What is the purpose of the <label> tag in HTML?

The <label> tag is used to describe a label for an input element. It increases accessibility and enhances the user experience by making it easier to interact with forms.

How do you link a <label> to an input field?

The <label> tag uses the for attribute to link the label to an input field. The value of the for attribute must match the id of the input field.

Can the <label> tag be applied to all types of input fields?

Yes, the <label> tag can be used with all sorts of input elements such as text, checkboxes, radio buttons, and dropdowns.

Conclusion

In this article, we discussed the importance and functionality of the HTML <label> tag. We also discussed how it improves user experience and accessibility in forms, the syntax and attributes of the <label> tag, and provided some practical examples of how to use it with various input fields. Knowing and using the <label> tag will make your forms user-friendly and accessible.

Live masterclass

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

436+ registered

SDE LinkedIn & Naukri Hacks to Get More Recruiter Calls

by Shantanu Shubham

21 May, 2025

01:30 PM

325+ registered

Amazon Data Analyst: Advanced Excel & AI Interview Tips

by Megna Roy

22 May, 2025

01:30 PM

312+ registered

Microsoft SDE Roadmap: Use AI Tools to Succeed

by Pranav Malik

19 May, 2025

01:30 PM

518+ registered

Break into MAANG Data Analyst roles from Non-Tech Profession

by Abhishek Soni

20 May, 2025

01:30 PM

436+ registered

View more events