Accessible styled forms

Forms are HTML-first: labels tied to inputs, correct type attributes, and clear errors. CSS improves clarity but cannot replace associations.

Non-negotiable HTML

• <label for="id"> matching id on the control.
• type="email", required, autocomplete where appropriate.
• Submit with <button type="submit"> inside <form>.

CSS techniques

• Stack fields with display: grid; gap: 1rem;.
• Full-width inputs: width: 100% inside a bounded form.
• :focus-visible rings on inputs for keyboard users.

Practice

1. Click the label text—focus should jump to the input.
2. Remove for/id pairing and notice the UX regression.

Deep dive: HTML forms lesson.

Important interview questions and answers

1. Q: Why associate labels with inputs?
   A: Larger click targets, screen reader names, and correct focus behavior.
2. Q: `button` vs `input type="submit"`?
   A: Both submit; `` can contain HTML content inside.
3. Q: Can CSS alone make a form accessible?
   A: No—semantics and labeling come from HTML; CSS only helps visibility.