Forms, errors, and authentication

Before you begin

By the end, you can…

• Write clear instructions and errors
• Support autocomplete and password managers
• Design recovery without repeated entry

01 / Understand

A form is a conversation about recovery

Labels explain what to provide; instructions explain format or constraints before failure; errors identify what went wrong and how to fix it. Placeholder text is not a replacement for a persistent label.

Validate at a helpful moment. Premature errors punish unfinished input; validation only after submission may create a long recovery loop. Preserve valid values and move focus or provide a summary when submission fails.

02 / Apply

Authentication should work with tools people rely on

Allow paste, password managers, and autocomplete. Avoid cognitive-function tests unless an accessible alternative exists. Use the correct autocomplete tokens so browsers can assist.

Touch targets need enough size and spacing. Required state, errors, and success must be available to screen readers without unexpected focus theft.

<input id="password" type="password"
  autocomplete="current-password"
  aria-describedby="password-help">
<p id="password-help">At least 12 characters.</p>

03 / Make

Your studio task

Make — Build a form that survives a mistake and supports password managers and paste.

1. Complete the form with intentional mistakes.
2. Rewrite instructions and errors as specific recovery steps.
3. Add labels, autocomplete, error relationships, and a summary.
4. Test paste, password manager behavior, zoom, keyboard, and touch targets.

04 / Check

Knowledge check