HTML

Lesson 06

Accessible form labels

Connect form controls to durable labels instead of relying on placeholder hints.

Good Code

signup-form.html
<form>
  <!-- The label and help text stay connected to the input by id. -->
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" aria-describedby="email-help" />
  <p id="email-help">Use the address where you want review updates.</p>
</form>

Bad Code

signup-form.html
<form>
  <!-- Placeholder text is not a durable label for the field. -->
  <input name="email" type="email" placeholder="Email address" />
  <p>Use the address where you want review updates.</p>
</form>

Review Notes

What to review

Good Code

The good version gives the email field a persistent accessible name by pairing the label and input with matching identifiers.

Bad Code

The bad version depends on placeholder text, which disappears as soon as someone types and does not provide the same durable relationship as a label.

Takeaways

  • Use a real label so the input keeps its name before, during, and after editing.