Labels

A <label> connects a visible name to an input. Without it, screen readers don’t know what the input is for — and clicking the visible text doesn’t focus the input.

Two Ways To Connect

for + id

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

The for attribute matches the input’s id. Clicking the label focuses the input.

Wrap the input

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

No for/id needed. The input is inside the label.

Both work — pick a style and stay consistent.

Don’t Use placeholder As a Label

<!-- ✗ Placeholder is NOT a label -->
<input type="email" placeholder="Email" />

<!-- ✓ Real label, with optional placeholder for example value -->
<label for="email">Email</label>
<input id="email" type="email" placeholder="ada@example.com" />

Placeholder disappears when the user starts typing. Screen readers often skip it. Users with cognitive disabilities lose their place. Visible label, every time.

Visually Hiding a Label

If the design genuinely shouldn’t show the label visually, hide it with CSS — don’t remove it. A common utility class:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

<label for="q" class="sr-only">Search</label>
<input id="q" type="search" placeholder="Search…" />

Screen readers find the label; sighted users see the placeholder.

<fieldset> + <legend> for Groups

For radio groups or related checkboxes:

<fieldset>
  <legend>Notification preferences</legend>
  <label><input type="checkbox" name="email" /> Email</label>
  <label><input type="checkbox" name="sms" /> SMS</label>
  <label><input type="checkbox" name="push" /> Push</label>
</fieldset>

<legend> is the group’s heading — also announced by screen readers.

Up Next

Other form controls: <select>, <textarea>.