CSS-Formular-Pseudoklassen

Mit Pseudoklassen können spezielle Zustände von Formularelementen angesprochen werden, z. B. wenn ein Benutzer ein Feld fokussiert, falsche Daten eingibt oder wenn ein Feld erforderlich ist.

Grundlegende Pseudoklassen

Zu den häufigsten Pseudoklassen gehören <:focus>, wenn ein Feld aktiv ist, <:required> für Pflichtfelder und <:disabled> für deaktivierte Felder.

Das folgende einfache Beispiel zeigt, wie ein Basisformular mit Pflichtfeldern aussieht, auf die Pseudoklassen angewendet werden.

Erweiterte Pseudoklassen

Die Pseudoklasse <:invalid> ist besonders nützlich, wenn jemand falsche Daten eingibt, z. B. eine ungültige E-Mail-Adresse. <:hover> oder <:checked> bieten ebenfalls viele Möglichkeiten, Formulare interaktiver zu gestalten.

Dieses Beispiel zeigt, wie sich die Farbe eines Feldes bei fehlerhafter Eingabe ändert und wie wir ein fokussiertes Feld hervorheben.

Tipps für Pseudoklassen

Mit Pseudoklassen lässt sich das Benutzererlebnis erheblich verbessern, wenn man sie sinnvoll einsetzt.

Gib dem Benutzer immer Feedback bei falschen Eingaben.
Verwende visuelle Hinweise wie Farbänderungen, um Fokus oder Fehler anzuzeigen.
Überlaste den Benutzer nicht mit zu vielen Änderungen; Feedback sollte klar, aber nicht störend sein.