CSS-formuliergenerator

Het basisformulier

<form class="form">
  <label class="field">
    <span class="field-label">Email</span>
    <input type="email" required>
    <span class="field-error">Please enter a valid email.</span>
  </label>

  <label class="field">
    <span class="field-label">Password</span>
    <input type="password" minlength="8" required>
  </label>

  <button type="submit" class="button">Sign up</button>
</form>

.field {
  display: block;
  margin-bottom: 1.25rem;
}
.field-label {
  display: block;
  font-weight: 500;
  margin-bottom: .25rem;
}
.field input {
  width: 100%;
  padding: .5rem .75rem;
  font: inherit;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  transition: border-color 120ms, box-shadow 120ms;
}
.field input:focus-visible {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.field input:invalid:not(:placeholder-shown) {
  border-color: #dc2626;
}
.field-error { display: none; color: #dc2626; font-size: .875rem; margin-top: .25rem; }
.field input:invalid:not(:placeholder-shown) ~ .field-error { display: block; }

Vier veelvoorkomende stijlen

Het zwevende label is het mooiste, maar vereist extra markup of JavaScript om de lege status te detecteren. Omlijnd is het meest universeel.

Controlelijst voor toegankelijkheid

• Een zichtbaar label voor elk invoerveld. Gebruik nooit een placeholder als enige label; die verdwijnt bij focus en voldoet niet aan de contrasteisen.
• <label for> of een omsluitend <label>. Beide zijn geldig; de omsluitende variant is iets eenvoudiger.
• Focusindicator. Gebruik nooit outline: none zonder een vervanging. Toetsenbordgebruikers hebben die nodig.
• Foutmeldingen: koppel ze via aria-describedby aan het invoerveld. Geef fouten niet alleen met kleur aan; voeg een tekstmelding of pictogram toe.
• Verplichte velden: gebruik het attribuut required. Voeg voor ziende gebruikers een visuele markering (asterisk) toe aan het label.
• Invoertypen: gebruik type="email", type="tel", type="url", type="number". Mobiele toetsenborden passen zich hierop aan.
• autocomplete-attributen: autocomplete="email", autocomplete="current-password", enz. Dit bespaart gebruikers veel typwerk.

Native validatiestatussen

CSS heeft pseudo-klassen voor formuliervaliditeit:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (voor numerieke invoer met minimum en maximum)
• :placeholder-shown (leeg; plaatsingsvak zichtbaar)
• :user-invalid (ongeldig en heeft de gebruiker ingevoerd, het juiste exemplaar voor foutstijlen)

De :user-invalid-pseudo-klasse is de meest nauwkeurige manier om fouten alleen te tonen nadat de gebruiker een actie heeft uitgevoerd, waardoor rode randen voorafgaand aan interactie worden vermeden. De ondersteuning werd rond 2023 beschikbaar gesteld in alle belangrijke versies.

Uitgeschakelde status

.field input:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

Uitgeschakelde invoervelden kunnen geen focus krijgen en worden niet verzonden. Wilt u ze toch focusbaar houden voor schermlezers, gebruik dan readonly: het formulier verstuurt de waarde wel, maar de gebruiker kan die niet bewerken.