HTML Label Tag: How It Works with Examples

Forms need instructions so users know what to enter. You use the HTML label tag to give names to input fields.

Understand How the <label> Tag Works in HTML

The <label> tag in HTML links text with a form control. It helps users know what to enter in inputs or checkboxes.

A <label> element tells users what the related input does. It also improves accessibility so screen readers can read the label with the input.

You can write the label in two main ways:

<label for="username">Username:</label>
<input type="text" id="username">

or

<label>
  Username:
  <input type="text">
</label>

In the first example, the for attribute links the label to the input’s id. In the second, nesting links the label and input without the for attribute or id.

• for (optional): matches the id of the input. It links the label to that field.
• Global attributes (like class or id) are optional for styles and scripts.

These let you connect labels or style them with CSS.

You can use for it to connect the label and input explicitly. You nest the input inside the label without for. Both methods make the label clickable to focus or toggle the input.

Example with for:

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

Example without for:

<label>
  Email:
  <input type="email">
</label>

This approach keeps your forms accessible and easy to use.

You can use the <label> tag with:

• <input>
• <textarea>
• <select>
• Custom form controls with id

It supports all user input elements.

Access Label with Form Elements

Use for Attribute and id:

<label for="password">Password:</label>
<input type="password" id="password">

Click on the label that focuses the input. This is good for accessibility.

Nest the Input Inside the Label:

You can place the input inside the label:

<label>
  Password:
  <input type="password">
</label>

This links them automatically. Users can click the text to focus the input without extra attributes.

How to Style the <label> Tag with CSS

You can use CSS to keep labels attractive. For example:

<style>
  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
  }
</style>

This makes each label stand out above the input.

Examples of the Label Tag

Simple Text Input:

<label for="firstName">First Name:</label>
<input type="text" id="firstName">

This basic example uses for and id to connect the label and input.

Checkbox with Nested Input:

<label>
  <input type="checkbox" name="subscribe">
  Subscribe to newsletter
</label>

Styled Label for Accessibility:

<style>
  label {
    font-size: 1rem;
    color: #0066cc;
  }
  input {
    padding: 5px;
    border: 1px solid #ccc;
  }
</style>
<label for="comments">Your Comments:</label>
<textarea id="comments"></textarea>

This advanced example uses CSS for accessible forms.

Wrapping Up

In this article, you learned what the HTML <label> tag is and how it helps make forms accessible. You also saw different ways to link labels with inputs and how to style them.

Here is a quick recap:

• Use <label> to link text with form fields.
• Nest inputs inside labels if you prefer no for.
• Style labels with CSS for better readability.
• Use labels to improve accessibility for all users.

FAQs

Similar Reads