CSS-Formular-Generator

Das Basisformular

<form class="form">
  <label class="field">
    <span class="field-label">E-Mail</span>
    <input type="email" required>
    <span class="field-error">Bitte geben Sie eine gültige E-Mail-Adresse ein.</span>
  </label>

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

  <button type="submit" class="button">Anmelden</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 gängige Stile

Schwebendes Label ist am schönsten, erfordert jedoch zusätzliches Markup oder JavaScript, um den leeren Zustand zu erkennen. Umrandet ist am universellsten.

Barrierefreiheits-Checkliste

• Sichtbares Label für jedes Eingabefeld. Verwenden Sie niemals Platzhalter als einziges Label, es verschwindet beim Fokus und erfüllt nicht die Kontrastanforderungen.
• <label for> oder umschließendes <label>. Beides ist gültig; das Umschließen ist etwas einfacher.
• Fokusindikator. Verwenden Sie niemals outline: none ohne Ersatz. Tastaturnutzer benötigen ihn.
• Fehlermeldungen: verlinken Sie sie über aria-describedby auf dem Eingabefeld. Verwenden Sie nicht nur Farbe, um Fehler zu kennzeichnen, fügen Sie eine Textnachricht oder ein Symbol hinzu.
• Erforderliche Felder: verwenden Sie das Attribut required. Fügen Sie ein visuelles Zeichen (Sternchen) im Label für sehende Benutzer hinzu.
• Eingabetypen: verwenden Sie type="email", type="tel", type="url", type="number". Mobile Tastaturen passen sich an.
• autocomplete-Attribute: autocomplete="email", autocomplete="current-password", usw. Spart den Benutzern viel Tipparbeit.

Native Validierungszustände (browsereigen)

CSS hat Pseudo-Klassen für die Formularvalidität:

• :required / :optional
• :valid / :invalid
• :in-range / :out-of-range (für numerische Eingaben mit min/max)
• :placeholder-shown (leer, Platzhalter sichtbar)
• :user-invalid (ungültig und Benutzer hat interagiert, die richtige für Fehlerstile)

Die Pseudo-Klasse :user-invalid ist der sauberste Weg, um Fehler nur anzuzeigen, nachdem der Benutzer etwas getan hat, und vermeidet rote Ränder vor der Interaktion. Unterstützung wurde 2023 in allen großen Browsern eingeführt.

Deaktivierter Zustand

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

Deaktivierte Eingaben sind nicht fokussierbar oder absendbar. Wenn Sie möchten, dass sie für Screenreader fokussierbar sind, verwenden Sie stattdessen readonly, das Formular sendet den Wert, aber der Benutzer kann ihn nicht bearbeiten.