Forms & Inputs
Build forms that people can actually complete without frustration.
Forms are where your users do real things: sign up, check out, send messages. A confusing form loses customers. A clear form converts.
Labels
Every input needs a visible label.
Clear labels
- Label text above or beside each input - Labels are always visible (not just placeholder text)
- Labels describe what to enter: "Email address", not "Input 1"
Placeholder-only labels
- Placeholder text as the only label (disappears when typing) - No label at all — users guess what goes where - Generic labels like "Field" or "Enter value"
High impact — forms~2 paws
Missing form labels is one of the top accessibility failures. It also confuses users on mobile where placeholders vanish when typing.
Error handling
When something goes wrong, tell users exactly what happened and how to fix it.
Helpful errors
- Error message appears next to the problem field - Message says what's wrong: "Email must include @" - Field is visually marked (red border + icon + text) - Error shown immediately, not after submitting the whole form
Unhelpful errors
- Generic "Form invalid" at the top of the page - No indication of which field has the problem - Error shown only after submitting - "Invalid input" with no explanation
Input types
Use the right HTML input type so mobile users get the right keyboard:
| What you need | Input type | Mobile keyboard |
|---|---|---|
type="email" | @ symbol visible | |
| Phone | type="tel" | Number pad |
| URL | type="url" | .com button |
| Number | type="number" | Number pad |
| Password | type="password" | Hidden text |
| Date | type="date" | Date picker |
Button design
Submit buttons should be obvious.
Clear call to action
- Button text says what happens: "Create account", not "Submit" - Primary action is visually prominent (filled, colored) - Secondary action is subtler (outlined, text-only) - Button shows loading state while processing
Mystery buttons
- Button says "Submit" or "OK" (what does it submit?) - Multiple buttons that look identical - No feedback after clicking (did it work?)
Quick checklist
Self-assessment checklist