Form UX

Collect required data with minimal friction. Pattern overview also in interaction-design-patterns; this skill is the deep dive.

Essentials

• Labels always visible (above input by default); never placeholder-as-label
• One column for most forms; group with headings/fieldsets
• Validate on blur (and on submit); not on every keystroke unless formatting aids (phone)
• Errors next to fields: what / why / how; preserve input
• Required marked; optional unmarked
• Progressive disclosure — show advanced/rare fields only when needed
• Accessible — <label for>, errors announced, keyboard complete

Structure sketch