CSS Forms
A form works better when labels, fields, help text, and actions are visually related. Full-width fields create a predictable reading path.
How it works
- Labels, input types, and instructions belong in HTML. CSS can improve legibility and feedback but cannot supply missing form semantics.
- The static preview disables form controls. Copy the example to a local page to test focus, typing, selection, and validation.
A practical example
The HTML supplies the content; the CSS below styles it. Open both together in the playground, then change the lesson rules at the end of the stylesheet.
<form class="card"><label for="name">Your name</label><input id="name" type="text" placeholder="Alex"><label for="choice">Workshop</label><select id="choice"><option>Repair club</option><option>Woodwork</option></select><button type="button">Save your choice</button><p class="hint">All experience levels welcome.</p></form>
body { margin: 0; padding: 24px; font-family: system-ui, sans-serif; color: #25332d; background: #f4f7f2; }
.card { padding: 20px; background: white; border: 1px solid #d4dfd6; }
h2 { margin-top: 0; }
p { line-height: 1.6; }
a { color: #17634c; }
.badge { display: inline-block; margin-bottom: 12px; font-size: .8rem; }
.layout { display: grid; gap: 16px; }
.photo { width: 100%; height: 160px; background: linear-gradient(135deg, #e4af6b, #668cba); }
button, input, select { font: inherit; padding: 8px; }
label { display: block; margin-block: 12px 4px; }
/* This lesson */
.card { max-width: 30rem; border-radius: 12px; }
input, select { width: 100%; box-sizing: border-box; }
button { margin-top: 18px; }
A form works better when labels, fields, help text, and actions are visually related. Full-width fields create a predictable reading path.