Muhammed Senussi
Muhammed Senussi
  • Muhammed Senussi
Forms Are Still the Hardest Thing on the WebFrontend

A form looks like the simplest thing on a page and contains more edge cases than the rest of the application.

Timing is most of the experience

Validating on every keystroke tells someone their email is invalid while they are typing the third character. Validating only on submit makes them fix six things at once. The rule that tests well: validate on blur, revalidate on change once a field has already errored, and never move focus without the user asking.

The parts that get skipped

  • Errors need to reach a screen reader. A red border is not an announcement; associate the message with aria-describedby and put a summary at the top that links to each field.
  • Autofill saves more time than any feature you will build. Use the standard autocomplete tokens and test it, because a custom component usually breaks it silently.
  • The back button must not lose what someone typed. This is the complaint users actually voice.
  • One column. Two-column forms consistently test worse and the reason is scanning order.

3 Comments

  • Lotte Jansen

    February 4, 2025

    The blur-then-revalidate rule is the one I keep having to re-explain in reviews. Having it written down somewhere will help.

  • Yara Mansour

    February 6, 2025

    Custom select components breaking autofill is such a widespread problem and almost nobody tests for it.

    • Muhammed Senussi

      Muhammed Senussi

      AuthorFebruary 6, 2025

      It is worth adding to a manual QA checklist, because no automated test I know of catches it. Fill a form with the browser autofill, and see how many fields land. On most component libraries the answer is about half.

Leave a comment