Forms and inputs

Form styling

Forms require more than colors. Inputs need readable labels, adequate size, clear focus states, useful error messages and accessible relationships between labels and controls.

Use semantic HTML

Use label, input, select, textarea and button rather than clickable generic elements.

Validation states

Style valid, invalid, disabled and focus states consistently. The visual state should agree with the actual form state exposed to assistive technology.