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 visible label stays connected to the input by for and id. -->
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" />
</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" />
</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.