CSS Form Examples

Forms are where a page stops being a document and starts being a tool, and they are also where most people reach for JavaScript first. Much of that reaching is unnecessary. A checkbox already holds a boolean. A radio group already holds one choice out of several. The :checked pseudo-class reads that state back out, and the sibling combinators let anything else in the same container respond to it.

What follows are the controls a real form needs, each one built on that idea. Every example is a working control rather than a picture of one, so it can be reached with the keyboard and announced by a screen reader. Where a technique has an accessibility cost, the example page says so instead of hiding it.