HTML Form Design — Modern Patterns for 2026

<style>
  .sf-form {
    display: grid; gap: 16px;
    max-width: 480px; margin: 0 auto;
    font-family: ui-sans-serif, system-ui;
  }
  .sf-form label { display: grid; gap: 6px; font-size: 14px; color: #1a1a1a; }
  .sf-form input, .sf-form textarea {
    padding: 11px 14px;
    font-size: 15px;
    border: 1px solid #d4d4d4;
    border-radius: 10px;
    background: #fff;
    transition: border-color 120ms, box-shadow 120ms;
  }
  .sf-form input:focus, .sf-form textarea:focus {
    outline: none;
    border-color: #ff4f00;
    box-shadow: 0 0 0 3px rgba(255,79,0,0.15);
  }
  .sf-form button {
    padding: 12px 20px;
    font-size: 15px; font-weight: 600;
    background: #1a1a1a; color: #fafaf7;
    border: 0; border-radius: 999px;
    cursor: pointer;
  }
  @media (prefers-color-scheme: dark) {
    .sf-form { color: #fafaf7; }
    .sf-form input, .sf-form textarea {
      background: #1a1a1a; color: #fafaf7; border-color: #333;
    }
  }
</style>

<form class="sf-form"
      action="https://splitforms.com/api/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
  <label>Name<input name="name" required /></label>
  <label>Email<input name="email" type="email" required /></label>
  <label>Message<textarea name="message" rows="4" required></textarea></label>
  <input type="checkbox" name="botcheck" style="display:none" tabindex="-1" />
  <button type="submit">Send message</button>
</form>

Modern HTML form design has converged on a small set of conventions. Single-column vertical layout — multi-column forms slow scanning and confuse mobile reflow. Visible labels above inputs (not placeholder-only) — placeholder text disappears on focus, breaking accessibility and creating UX dead zones. Generous spacing (16-20px between fields) — cramped forms read as low-trust.

Native validation styling using CSS pseudo-classes: `:valid` and `:invalid` apply automatically based on the input's validity state. Combined with `:focus` and `:placeholder-shown`, you can build a polished error UI with zero JavaScript. The form above uses border-color and box-shadow on focus; you can layer `:invalid:not(:placeholder-shown)` for inline error highlighting after the user has typed.

Dark mode via `prefers-color-scheme` is the 2026 default — every modern browser supports it, most visitors have a preference set. The CSS above flips the form's color tokens inside a `@media (prefers-color-scheme: dark)` block. No JavaScript theme switcher, no library.

Accessibility-first design isn't a separate concern — it's baked into the conventions. Visible labels work for screen readers automatically. Sufficient color contrast (4.5:1 minimum) is just good design. Native focus rings (or styled equivalents) keep keyboard users oriented. The form is faster to design *and* more accessible than the alternative.

Single column, labels above, focus rings, dark mode — five rules, polished form.