Accessible HTML forms

Labels are part of the control

Placeholder text is not a persistent label. Associate visible text through nesting or matching for and id values.

<form action="/contact" method="post">
  <div>
    <label for="email">Email address</label>
    <input id="email" name="email" type="email" autocomplete="email" required />
  </div>

  <div>
    <label for="message">How can we help?</label>
    <textarea id="message" name="message" rows="6" required></textarea>
  </div>

  <button type="submit">Send message</button>
</form>

This markup describes a request, but it does not create a server. The action must point to a real endpoint before you claim the message is sent.

Error handling

Browser validation is a useful baseline. A production endpoint must validate again on the server, return useful errors, preserve safe input, and move or announce focus appropriately.

Exercise

Add a grouped set of contact preferences using fieldset and legend. Try the form with only a keyboard and confirm the visible label remains available while typing.