Vergib f-input an Textfelder, f-select an Dropdowns und f-label an die Beschriftungen. Rahmen, Innenabstand und Fokus-Rahmen kommen automatisch.
Die Klassen
| Klasse | Wofür |
|---|---|
f-field-group |
Container um Beschriftung + Feld |
f-label |
Beschriftung des Feldes |
f-input |
Textfeld, E-Mail, Telefon, mehrzeiliger Text |
f-select |
Auswahlliste (Dropdown) |
f-help |
Hinweistext unter dem Feld |
f-error |
Fehlermeldung |
Aufbau eines Feldes
- Container:
f-field-group - Beschriftung:
f-label - Eingabefeld:
f-input - Optional darunter ein Hinweis:
f-help
[Screenshot: Formularfeld mit Beschriftung, Eingabefeld und Hinweistext]Platzhalter — Bild wird nachgerüstet.
Was automatisch dazukommt
- Fokus-Rahmen — wer mit der Tabulatortaste navigiert, sieht klar, wo er ist
- Mindesthöhe 44 Pixel — damit sich Felder auf dem Handy zuverlässig antippen lassen
- Fehler-Zustand — ein als fehlerhaft markiertes Feld bekommt automatisch einen roten Rahmen
Pflichtfelder kennzeichnen
Die Beschriftung erhält zusätzlich f-label--required — dann erscheint automatisch ein Sternchen. Schreib es nicht selbst in den Text, sonst liest ein Screenreader „Name Sternchen“ vor.
Beschriftung nicht weglassen
Es ist verlockend, nur einen Platzhaltertext im Feld zu verwenden und die Beschriftung zu sparen. Tu das nicht: Der Platzhalter verschwindet beim Tippen, und wer unterbrochen wird, weiß nicht mehr, was das Feld wollte. Für Screenreader ist ein Feld ohne Beschriftung gar nicht benutzbar.
Wenn die Beschriftung optisch nicht erscheinen soll, gib ihr u-sr-only — dann ist sie für Screenreader da, aber unsichtbar.
Wenn ein Feld sich nicht ändert: Formular-Plugins bringen eigene Stile mit, die stellenweise stärker sind als eine Global Class. Wer das lokal überschreibt, verdeckt nur die Ursache und muss es an jedem weiteren Formular wiederholen. Melde dich — dann wird die Brücke zum Plugin einmal zentral nachgezogen. Das ist kein Bedienfehler.