HTML forms are not just inputs; they are interactions

A form is a conversation with a user. Explain what information is needed, why it is needed and how to recover from an error.

Label controls visibly

<form action="/subscribe" method="post">
  <label for="email">Email address</label>
  <p id="email-help">We will send the newsletter to this address.</p>
  <input id="email" name="email" type="email"
         autocomplete="email" aria-describedby="email-help" required>
  <button type="submit">Subscribe</button>
</form>

The action is illustrative: the server must implement the endpoint. A placeholder is not a replacement for the label.

Make errors actionable

Validate on the server even when browser validation is enabled. Preserve entered values after a failed submission. Associate field errors using aria-describedby and mark invalid fields with aria-invalid="true" when an error is present.

For multiple errors, provide a summary linking to affected controls. Test keyboard navigation, submission and error recovery, rather than only the empty form.

Sources

• W3C: Forms tutorial