18 CSS Forms

The autogrow in the contact form is one line: field-sizing: content on the <textarea>. The element measures its own text and sets its block size to fit, so the box grows as you type and shrinks on delete — no scrollHeight reads, no resize handler, no hidden mirror element. Pair it with min-height and max-height so it starts at a sensible size and stops before it eats the viewport, then let an inner scroll take over. The common bug: people still bind a keyup handler that sets style.height, which fights the native sizing and causes a visible jump on every keystroke — delete it. When not to use it: field-sizing is still rolling out, so treat the growth as progressive enhancement. A plain fixed-height textarea with a scrollbar is the baseline everyone gets, and that is a perfectly usable fallback while support fills in.

The checkout and newsletter forms change layout with a container query, not a viewport @media rule. Set container-type: inline-size on the wrapper, then write @container (min-width: 32rem) to flip from a stacked single column to the two-column order-summary layout. The win is that the form responds to its own width, so the same component lays out correctly in a wide page body, a narrow sidebar, or a modal without knowing the viewport. The usual bug: writing the @container query to style the same element you set container-type on — a container can't query itself, so the rule has to target a descendant inside it. That is exactly why the newsletter form nests its fields in a child the query controls. Every current engine ships container queries; if you must support older browsers, keep a @media fallback behind it, but don't reach for it first.

The NPS survey uses eleven real <input type="radio"> controls sharing one name, each paired with a <label> styled as a numbered chip. Selection is pure CSS: input:checked + label paints the chosen score, and the red-to-green ramp is just a per-label background. The follow-up comment field appears with :has() — a rule such as form:has(input:checked) reveals it once any score is picked. The bug that breaks it: forgetting to connect each label to its input, either by wrapping the input in the label or matching for to id — without that, clicking a number does nothing and the control is unreachable by keyboard. Because these are native radios, Tab, arrow-key navigation and group semantics work for free. Wrap the set in a <fieldset> with a <legend> so a screen reader announces the question alongside each option.

Autofill is driven entirely by the autocomplete attribute, and the shipping form sets the exact tokens browsers expect: name, address-line1 and address-line2, address-level2 for city, address-level1 for state or region, postal-code, and country. Get the token right and the browser offers a saved address in one tap and fills every field. The usual reason it 'doesn't work': invented values like autocomplete="on" or autocomplete="address", or a missing name so the heuristic can't map the field. Set inputmode="numeric" on the postal code so mobile shows the number pad. For a page with both billing and shipping, prefix the tokens — shipping street-address, billing street-address — so the browser keeps them separate. Never switch autofill off on address or payment fields; it is the single biggest completion-rate lever you have.

The profile-settings and job-application forms preview the picked image locally using URL.createObjectURL(file) on the file from the <input type="file"> change event, assigning the result to an <img> source. It is instant and offline — no upload round-trip and no base64 FileReader work. The bug almost everyone ships: never calling URL.revokeObjectURL(), which leaks the blob in memory for the life of the page — revoke the previous URL each time a new file is chosen. Validate before previewing: check file.type against an allowed image list and file.size against a cap, so a 40 MB file or a PDF doesn't render as a broken image. For accessibility, keep the real file input focusable and labelled even when you hide it behind a styled button — a visually-hidden input paired with a <label> is still reachable, whereas display: none removes it from the tab order entirely.

The registration form's meter is four segment bars plus a small script that scores the password and sets how many segments fill and the colour they interpolate toward. Keep the scoring honest: weight length first — it matters more than any single character class — then add points for distinct character sets, and cap the score so a short password can't reach 'strong' by tacking on one symbol. Drive the bars by setting a data attribute or a CSS custom property they read, so the meter stays pure presentation. The accessibility point that gets missed: a colour change alone is invisible to colour-blind and screen-reader users, so pair it with a visible text label — 'Weak', 'Fair', 'Strong' — inside an aria-live region. When not to lean on it: never block submission on the meter, it is guidance not a gate, and don't impose forced symbol-and-digit composition rules — length plus a blocklist of common passwords is the stronger policy.

The mortgage pre-qualification form links a <input type="range"> to a <input type="number"> for home price and down payment. Wire both to the same input event and write each other's value inside the handler; use input, not change, so it fires on every drag and keystroke and the two stay in lockstep live. Clamp in one place — read the value, bound it to min and max, then assign — otherwise typing a huge figure in the number field shoves the slider past its track. Keep both as real fields with their own <label> so each value is announced and keyboard-adjustable; the slider alone is clumsy for precise entry and the number alone loses the at-a-glance feel, which is why pairing them earns its code. Format the displayed currency in a separate read-only element — injecting commas and a dollar sign into a type="number" field makes it invalid and the browser silently clears it.

The baseline is consistent across the set: every control has a programmatic label, grouped controls sit in a <fieldset> with a <legend>, and the patient-intake form goes further by setting its whole surface in Atkinson Hyperlegible, a typeface built to keep similar letterforms distinct. Associate a label by pointing for at the input's id, or wrap the input inside the <label> — placeholder text is not a label and vanishes on focus. The consent checkbox is a real <input type="checkbox"> with its own label stating exactly what is agreed to, and required fields use the required attribute plus a visible cue, never colour alone. The bug that quietly excludes people: a custom control built from a <div> with a click handler — it has no role, no keyboard behaviour and no value, so Tab and screen-reader users can't operate it. Start from the native element and style it rather than rebuilding one from scratch.