Tipps für bessere Formulare (4)

Moin!

Ich dachte eigentlich, dass ich mich gut mit CSS auskenne. Bis ich in die Welt der Formulargestaltung eingetaucht bin. Denn nun weiß ich, dass es offenbar noch genügend Bereiche gibt, in denen ich die letzten Jahre unter einem Stein geschlafen habe.

Wusstest du zum Beispiel, dass du per HTML und CSS ein Textfeld validieren und vor dem Klick auf Absenden kennzeichnen kannst? Ich war noch auf dem Stand, dass das nur mithilfe von Javascript geht.

Hier ein einfaches Beispiel:

Ich habe ein Textfeld mit type="email", das eine gültige E-Mail-Adresse erwartet. Mit den folgenden Anweisungen prüfe ich, ob es sich beim Inhalt um eine E-Mail-Adresse handelt. Bei Fokus wird der Rahmen blau. Entspricht die Eingabe einer Mail-Adresse, wird der Rahmen grün dargestellt, wenn nicht, wird er rot dargestellt:

.widget-text { 
  input {
    &:focus {
      border: 1px solid blue;
    }

    &:user-valid {
      outline: 1px solid green;
    }
  
    &:user-invalid {
      outline: 1px solid red;
    }
  }
}

Es gibt übrigens auch eine :valid Pseudo-Klasse, aber der Vorteil von :user-valid ist, dass erst nach erstmaligem Fokus, die Anweisungen greifen (mein Rahmen also vorher grau sein könnte).

Zusätzlich zum farbigem Rahmen könntest du – um die Barrierefreiheit zu gewährleisten – außerdem noch mit Häkchen ✅ und Kreuz ❌ Icons arbeiten. Auch hier ist :has() wieder dein Freund.

Für mich war diese Erkenntnis mal wieder „mindblowing“ 🤯
Und für dich? Alter Hut 🎩 oder heißer Scheiß 💩?

Erstma'
Dennis

Zurück