HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls

Badar KhalilUpdated September 30, 2026 6 min read

Why forms and inputs matter

Forms and inputs are how users log in, search, pay, sign up and send data. A poorly built form loses users, while a clear, accessible, well-validated form increases conversions. Modern HTML and CSS give you powerful tools so you can build great forms with less JavaScript.

Focus keyword: CSS forms and inputs. Related trending keywords: accessible form design, :user-invalid, :focus-visible, accent-color, field-sizing: content, CSS toggle switch, floating label CSS, HTML form validation, autocomplete attribute.

Start with correct HTML

Every control needs a visible <label for='id'> linked to the input. Placeholders are not labels because they disappear and often have low contrast.
Use the right type: email, tel, url, number, date, search, password. This gives the right mobile keyboard and built-in validation.
Add autocomplete tokens such as name, email, username, new-password, one-time-code, street-address. It helps users and is a WCAG requirement for common data.
Use inputmode (for example numeric) when you need a specific keyboard without changing the type.
Group related controls with <fieldset> and <legend>, especially radio buttons and checkboxes.

Base input styling

Set font: inherit (controls do not inherit fonts by default), a minimum height of about 44px, padding, a visible border with at least 3:1 contrast against the background, and a clear :focus-visible state. Use box-sizing: border-box and width: 100% with a max width. Keep font size at 16px or larger on mobile so iOS does not zoom in on focus.

Validation with HTML and CSS

Built-in attributes: required, minlength, maxlength, min, max, pattern, step.
:invalid matches immediately, even before the user types, which shows red borders too early. Prefer :user-invalid and :user-valid, which only match after the user has interacted with the field.
Show error text near the field and connect it with aria-describedby. Mark invalid fields with aria-invalid='true' when you control validation in JavaScript.
Do not use color alone. Add an icon or text such as Enter a valid email address.
The Constraint Validation API (input.validity, setCustomValidity(), reportValidity()) lets you customize messages.

Helpful modern CSS for forms

accent-color: change the color of native checkboxes, radios, range and progress with one line.
field-sizing: content: lets textareas and inputs grow with their content (check browser support and provide fallback rows).
:has(): style a field wrapper when it contains an invalid input or a checked checkbox, for example .field:has(:user-invalid).
:placeholder-shown: detect an empty field to build floating labels.
appearance: none: remove native styling to build custom switches, checkboxes and selects. Keep the real input in the DOM so it stays accessible.
color-scheme and light-dark(): make controls follow the theme.

Custom checkbox and switch

Keep the native input and style it with appearance: none, or hide it visually (not with display: none) and style a sibling. For a toggle switch use <input type='checkbox' role='switch'> so screen readers announce it as a switch.

Floating labels

A floating label sits inside the input and moves up when the field is focused or filled. Use placeholder=' ' and the selector input:not(:placeholder-shown) + label. Make sure the label stays readable and does not overlap the text.

Layout and usability

Use a single column for most forms. Use CSS grid for small related groups (city and ZIP).
Put hints below the label, not inside the placeholder.
Mark required fields consistently and explain the marker.
Disable the submit button only if you explain why. Usually show errors on submit instead.
Keep touch targets large, and do not break paste in password fields.

Quick summary

Combine semantic labels, the right input types and autocomplete, clear focus and error states, and modern CSS like :user-invalid, accent-color and :has() to create accessible CSS forms and inputs.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 24px; background: #f8fafc; }
  form { max-width: 380px; display: grid; gap: 16px; background: #fff; padding: 24px; border-radius: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.08); }
  .field { display: grid; gap: 6px; }
  label { font-weight: 600; font-size: 14px; }
  .hint { font-size: 13px; color: #64748b; }
  input, select, textarea { font: inherit; font-size: 16px; min-height: 44px; padding: 10px 12px; border: 2px solid #94a3b8; border-radius: 10px; background: #fff; width: 100%; box-sizing: border-box; }
  input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #c7d2fe; border-color: #4f46e5; }
  button { min-height: 46px; border: 0; border-radius: 10px; background: #4f46e5; color: #fff; font: 700 16px system-ui; cursor: pointer; }
</style>
<form>
  <div class='field'>
    <label for='n'>Full name</label>
    <input id='n' name='name' autocomplete='name' required>
  </div>
  <div class='field'>
    <label for='e'>Email</label>
    <input id='e' type='email' name='email' autocomplete='email' aria-describedby='eh' required>
    <span class='hint' id='eh'>We will never share your email.</span>
  </div>
  <div class='field'>
    <label for='c'>Country</label>
    <select id='c' name='country' autocomplete='country-name'><option>Pakistan</option><option>India</option><option>Other</option></select>
  </div>
  <button type='submit'>Create account</button>
</form>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 24px; }
  .field { display: grid; gap: 6px; max-width: 340px; margin-bottom: 16px; }
  input { font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; border: 2px solid #94a3b8; border-radius: 10px; }
  .msg { display: none; font-size: 13px; }
  /* Only after the user interacts */
  input:user-invalid { border-color: #dc2626; background: #fef2f2; }
  input:user-valid { border-color: #16a34a; }
  .field:has(input:user-invalid) .err { display: block; color: #b91c1c; }
  .field:has(input:user-valid) .ok { display: block; color: #15803d; }
  input:focus-visible { outline: 3px solid #c7d2fe; }
</style>
<div class='field'>
  <label for='em'>Email</label>
  <input id='em' type='email' required aria-describedby='em-msg'>
  <span id='em-msg'><span class='msg err'>Please enter a valid email, like name@example.com.</span><span class='msg ok'>Looks good.</span></span>
</div>
<div class='field'>
  <label for='pw'>Password (min 8 characters)</label>
  <input id='pw' type='password' minlength='8' required autocomplete='new-password'>
</div>
<p>Type, then leave the field. Errors appear only after interaction (:user-invalid).</p>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 24px; }
  .row { display: flex; align-items: center; gap: 12px; }
  .switch { appearance: none; position: relative; width: 52px; height: 30px; border-radius: 999px; background: #94a3b8; cursor: pointer; transition: background-color .25s; margin: 0; }
  .switch::before { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: transform .25s; }
  .switch:checked { background: #16a34a; }
  .switch:checked::before { transform: translateX(22px); }
  .switch:focus-visible { outline: 3px solid #f59e0b; outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) { .switch, .switch::before { transition: none; } }
  .chk { accent-color: #4f46e5; width: 20px; height: 20px; }
</style>
<div class='row'>
  <input class='switch' type='checkbox' role='switch' id='notif'>
  <label for='notif'>Email notifications</label>
</div>
<div class='row' style='margin-top:16px'>
  <input class='chk' type='checkbox' id='terms'>
  <label for='terms'>I accept the terms (accent-color)</label>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 30px; }
  .float { position: relative; width: 320px; }
  .float input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 22px 12px 8px; min-height: 56px; border: 2px solid #94a3b8; border-radius: 12px; background: #fff; }
  .float label { position: absolute; left: 14px; top: 16px; color: #64748b; pointer-events: none; transition: transform .2s, color .2s; transform-origin: left top; }
  .float input:focus-visible { outline: 3px solid #c7d2fe; border-color: #4f46e5; }
  .float input:focus + label, .float input:not(:placeholder-shown) + label { transform: translateY(-10px) scale(.78); color: #4f46e5; }
  @media (prefers-reduced-motion: reduce) { .float label { transition: none; } }
</style>
<div class='float'>
  <input id='fn' placeholder=' ' autocomplete='given-name'>
  <label for='fn'>First name</label>
</div>

Output

Press Run to execute.

Try it Yourself HTML

<style>
  body { font-family: system-ui, sans-serif; padding: 24px; max-width: 420px; }
  textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 10px 12px; border: 2px solid #94a3b8; border-radius: 10px; min-height: 3lh; max-height: 12lh; field-sizing: content; }
  input[type='range'] { width: 100%; accent-color: #ec4899; }
  output { font-weight: 700; }
  fieldset { border: 2px solid #e2e8f0; border-radius: 12px; margin-top: 18px; }
  legend { font-weight: 700; padding: 0 6px; }
  fieldset label { display: flex; gap: 8px; align-items: center; padding: 6px 0; }
  input[type='radio'] { accent-color: #4f46e5; width: 18px; height: 18px; }
</style>
<label for='msg'>Message (grows as you type)</label>
<textarea id='msg' placeholder='Type several lines...'></textarea>
<label for='vol' style='display:block;margin-top:18px'>Volume: <output id='o'>50</output></label>
<input id='vol' type='range' min='0' max='100' value='50'>
<fieldset>
  <legend>Plan</legend>
  <label><input type='radio' name='plan' checked> Free</label>
  <label><input type='radio' name='plan'> Pro</label>
</fieldset>
<script>
  document.getElementById('vol').addEventListener('input', function (e) { document.getElementById('o').textContent = e.target.value; });
</script>

Output

Press Run to execute.

Exercise: Create an accessible validated signup fieldHTML

Style the email input. It needs a visible label, a hint linked with aria-describedby, a clear focus-visible style, and validation styling that only appears after interaction using :user-invalid. Show an error message next to the field using :has() without relying on color alone.

Try it Yourself HTML

<style>
  input { font: inherit; font-size: 16px; min-height: 44px; padding: 8px 12px; border: 2px solid #94a3b8; border-radius: 8px; }
  .error { display: none; }
  /* TODO: focus-visible, :user-invalid, .field:has(...) .error { display:block } */
</style>
<div class='field'>
  <label for='mail'>Work email</label>
  <input id='mail' type='email' required>
  <!-- TODO: hint with id and aria-describedby -->
  <p class='error'>Enter a valid email address.</p>
</div>

Output

Press Run to execute.

Show expected output

After typing an invalid email and leaving the field, the input shows a red border and the error text appears. Before interaction, nothing is shown in red.

This is a self-check — compare your result with the expected output above.

Was this page helpful?