HTML <label> Tag

The HTML <label> tag defines a caption for a form control such as an <input>, <select>, or <textarea>. The label and the control are linked, so the browser knows the text belongs to that specific field.

This page covers the two ways to associate a label with a control, why labels matter for accessibility and usability, and how <label> compares to ARIA labelling attributes and the placeholder.

Why labels matter

A label is not just visible text next to a field — it is programmatically tied to a control. That association unlocks three concrete benefits:

Accessibility. When the control receives focus, a screen reader announces its label, so the user knows what to type. Without a label, the field is announced only by type (for example "edit text") with no context.
A larger click target. Clicking or tapping the label focuses (and for checkboxes/radio buttons, toggles) the control. This is especially valuable for tiny checkboxes and radio buttons, where the box itself is hard to hit precisely on touchscreens.
Better usability. Users instantly understand which caption belongs to which field, reducing form errors.

The two ways to associate a label

There are two ways to connect a <label> to its control: explicit association with the for attribute, and implicit association by wrapping the control.

Explicit association (`for` + `id`)

Give the control an id, then set the label's for attribute to that same value. The for value must match the control's id exactly, and the id must exist in the document.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="lfname">First name:</label>
      <input id="lfname" name="fname" type="text" />
    </form>
  </body>
</html>

Try it Yourself »

Explicit labelling is the most flexible approach: the label and control can sit anywhere in the markup, which is useful when your layout (for example a CSS grid or table) separates the caption from the field.

Implicit association (wrapping the control)

Place the control inside the <label> element. No id/for pair is needed — the nesting creates the association automatically.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label>Name
        <input name="Name" type="text" />
      </label>
    </form>
  </body>
</html>

Try it Yourself »

Both methods produce the same result. Wrapping is concise and guarantees the association even if you forget an id; explicit for is the choice when the markup structure keeps the label and control apart.

Rules and gotchas

One control per label. A single <label> is associated with exactly one form control. If you wrap two inputs in one label, only the first is associated.
A control may have several labels. The same input can be referenced by more than one <label for="...">, and all of them will focus or toggle it when clicked.
for must point to a real id. If the for value does not match an existing id, the association silently fails — the label becomes plain text.
Only form controls are labelable. <label> can caption <input> (except type="hidden"), <button>, <meter>, <output>, <progress>, <select>, and <textarea>. It does not label a <div>, <span>, or heading.
Avoid interactive content inside a label. Don't put another control (a second input, a button, or a link) inside a <label>, as it competes with the labeled control for clicks.

Checkboxes and radio buttons

Labels matter most here, because the clickable box is tiny. With a proper label, the whole caption becomes part of the hit target.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="barca">Barcelona</label>
      <input type="radio" name="team" id="barca" value="Barcelona" />
      <br />
      <label for="real">Real Madrid</label>
      <input type="radio" name="team" id="real" value="Real Madrid" />
      <br />
    </form>
  </body>
</html>

Try it Yourself »

Labelling without a visible `<label>`: ARIA and `placeholder`

Sometimes a visible label does not fit the design. A visible <label> should still be your default — it benefits all users, not only screen-reader users — but the following options exist for the exceptions.

`aria-label`

Use aria-label to supply an accessible name directly on the control when there is no visible text to point to (for example a search field with only a magnifying-glass icon).

<input type="search" aria-label="Search the site" />

`aria-labelledby`

Use aria-labelledby when the naming text already exists elsewhere on the page. It references one or more element ids, and unlike for, it lets you build a label from several pieces of text.

<span id="billing">Billing</span>
<span id="name">Name</span>
<input type="text" aria-labelledby="billing name" />

When both a <label> and aria-labelledby are present, aria-labelledby wins.

`placeholder` is not a label

A placeholder is example text, not a label. It disappears as soon as the user types, offers poor color contrast in most browsers, and is not reliably announced as the field's name by assistive technology. Always pair an input with a real <label> — never rely on placeholder alone.

<!-- Not accessible: no label, only a placeholder -->
<input type="email" placeholder="Email" />

<!-- Accessible: real label, placeholder is an optional hint -->
<label for="email">Email</label>
<input id="email" type="email" placeholder="[email protected]" />

Example of the HTML `<label>` tag with CSS font properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
       padding: 20px;
      }
      label {
        font-size: 20px;
        font-weight: 700;
        color: #1c87c9;
      }
      input {
        width: 50%;
        height: 28px;
        padding: 4px 10px;
        border: 1px solid #666;
        background: #cce6ff;
        color: #1c87c9;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="user">Your Name:</label>
      <input id="user" name="Name" type="text" />
    </form>
  </body>
</html>

Try it Yourself »

Attributes

Attribute	Value	Description
`accesskey`	`accesskey`	Defines a keyboard shortcut to focus the associated form element (does not navigate or jump to it).
`for`	`element\_id`	Sets the ID of the element to which the label should be bound.
`form`	`form\_id`	Specifies the form(s) with which the label will be associated. This attribute allows you to place tags in an arbitrary location in the document, and not just as a descendant of the `<form>` element.

The <label> element also supports the Global Attributes and the Event Attributes.

Example of the `form` attribute:

The form attribute lets the label live outside the <form> it belongs to. The control still uses normal for/id association.

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

HTML <input> Tag — the control most often labeled.
HTML <form> Tag — the container that groups labels and controls.
HTML id Attribute — how the for/id link is built.

Practice

Which method correctly associates a label with a text input named email?

Set the input id to email and the label for attribute to email.Add a placeholder of Email to the input instead of a label.Match the label for attribute to the input name attribute.Give the label and the input the same class name.

Why labels matter

The two ways to associate a label

Explicit association (for + id)

Implicit association (wrapping the control)

Rules and gotchas

Checkboxes and radio buttons

Labelling without a visible <label>: ARIA and placeholder

aria-label

aria-labelledby

placeholder is not a label

Example of the HTML <label> tag with CSS font properties:

Attributes

Example of the form attribute:

Related topics

Practice

Explicit association (`for` + `id`)

Labelling without a visible `<label>`: ARIA and `placeholder`

`aria-label`

`aria-labelledby`

`placeholder` is not a label

Example of the HTML `<label>` tag with CSS font properties:

Example of the `form` attribute: