The <label> element provides a text caption for a form control, programmatically associating them so clicking the label focuses/activates the control.

Syntax

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

Deep Dive Course

**`<label>`** connects to a form control in one of two ways: explicitly, matching its **`for`** attribute to the control's **`id`** (as shown above), or implicitly, by wrapping the control directly inside the `<label>` (`<label>Email <input type="email"></label>`). Either way, clicking anywhere on the label text focuses (or, for a checkbox/radio, toggles) the associated control — and screen readers announce the label text whenever the user focuses that control, which is essential for understanding what a field is for.

1Understanding <label>

`<label>` connects to a form control in one of two ways: explicitly, matching its `for` attribute to the control's `id` (as shown above), or implicitly, by wrapping the control directly inside the <label> (<label>Email <input type="email"></label>). Either way, clicking anywhere on the label text focuses (or, for a checkbox/radio, toggles) the associated control — and screen readers announce the label text whenever the user focuses that control, which is essential for understanding what a field is for.

💡

A placeholder is NOT a substitute for a <label> — it disappears the moment the user starts typing, and many screen readers don't announce it as reliably as a real, persistent label.

editor.html

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

localhost:3000

2Practical Example

Here is a real-world application of <label> showing how it is used in production HTML.

editor.html

<!-- Implicit label: wrapping the control instead of using for/id -->
<label>
  <input type="checkbox" name="subscribe">
  Subscribe to newsletter
</label>

localhost:3000

3Best Practices

Follow these guidelines when working with <label>:

1. Give every form control a proper <label>, using either for/id or wrapping

2. Make label text click-expand the clickable area for checkboxes/radios — a real usability win, especially on mobile

3. Never rely on placeholder text alone as the only labeling for a field

⚠️

Tip: A placeholder is NOT a substitute for a <label> — it disappears the moment the user starts typing, and many screen readers don't announce it as reliably as a real, persistent label.

editor.html

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

localhost:3000

Examples

Example 01Basic Usage

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

Example 02Advanced Example

<!-- Implicit label: wrapping the control instead of using for/id -->
<label>
  <input type="checkbox" name="subscribe">
  Subscribe to newsletter
</label>

Best Practices

Give every form control a proper , using either for/id or wrapping
Make label text click-expand the clickable area for checkboxes/radios — a real usability win, especially on mobile
Never rely on placeholder text alone as the only labeling for a field

Interview Question

Why is a <label> more accessible than a placeholder for identifying a form field's purpose?▼

Hint: Think about what happens the moment a user starts typing into a field.

A placeholder disappears entirely once the user types any character into the field, so if they look away and back, or if a screen reader announces the current state, the field's purpose is gone. A <label> persists on screen at all times and is properly, programmatically tied to the control via for/id (or wrapping), so assistive technology reliably announces it whenever the field receives focus — regardless of whether the user has typed anything yet.

Exercises

EasyPractice using <label> in a real scenario.

View Solution

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

Frequently Asked Questions

Why is a <label> more accessible than a placeholder for identifying a form field's purpose?▼

A placeholder disappears entirely once the user types any character into the field, so if they look away and back, or if a screen reader announces the current state, the field's purpose is gone. A persists on screen at all times and is properly, programmatically tied to the control via for/id (or wrapping), so assistive technology reliably announces it whenever the field receives focus — regardless of whether the user has typed anything yet.

Related Functions

input-tagform-tag