Verwendung
Die Markierung von Pflichtfeldern ist eine Kennzeichnung von Eingabe- und Auswahlelementen, die zwingend befüllt oder ausgewählt werden müssen und bei Nichtbeachtung zu einem Fehlerzustand führen.
Als Markierungen dienen Asteriske * zur eindeutigen und gängigen Kennzeichnung; diese sind dem Label immer optisch und auch programmatisch unmittelbar zugeordnet. Zusätzlich soll das Vorhandensein von Pflichtfeldern über das required-Attribut am jeweiligen Formularelement kommuniziert werden.
Der Abstand des Asterisk zum Label-Text besteht aus einem Leerschritt.
<input type="checkbox" id="DSGVO" required>
<label for="DSGVO">Ja *</label>
In Fällen wo kein sichtbares Label eingesetzt werden kann (z. B. im beengten Raum von Datentabellen) stehen diese Kennzeichnungen immer unmittelbar hinter dem jeweiligen Formularelement und sind programmatisch zugeordnet.
Hinweise auf Pflichtfelder
Zum Beginn einer Maske mit Pflichtfeldern muss ein Hinweis angebracht werden, dass diese mit * markiert sind. Eine Kennzeichnung erst am Ende der Maske und somit nach den verpflichtenden Eingaben ist nicht zulässig. Alle nicht-markierten Elemente sind optionale „Kann“-Felder, die keine gesonderte Auszeichnung erhalten.
Sollten alle Felder eines Formulars Pflichtfelder sein, dann sollen nicht alle Felder einzeln ausgezeichnet werden. Die bessere Alternative ist hier, einen entsprechenden Hinweis vor das Formular zu stellen. Dieser Hinweis kann entfallen, wenn offensichtlich alle Felder verpflichtend sind, wie dies z. B. bei einer Anmeldung mit Benutzername und Passwort oder einer einfachen Suche der Fall ist.
Wenn nicht-chronologisch abzuarbeitende Formular-Prozesse auf mehrere Masken aufgeteilt sind, dann muss der Hinweis auf jeder Maske angezeigt werden. Dies ist zum Beispiel dann der Fall, wenn Nutzende direkt in Bearbeitungsschritt 3 von 5 einsteigen können.
Keine Pflichtfelder in ausblendbaren Inhalten
Pflichtfelder dürfen unter keinen Umständen in Akkordeons oder vergleichbaren Mustern platziert werden. Wenn Inhalte ausgeblendet sind oder ausgeblendet werden können, dann kann nicht mehr garantiert werden, dass diese durch Nutzende wahrgenommen werden. Dies könnte im Ernstfall zu einem unerwünschten und unnötigen Fehlerzustand des Formulars führen, wenn der Ort des Fehlers nicht erkennbar ist.
Validierung
Die Validierung der Pflichtfelder einer Maske erfolgt bei Betätigung der primären Schaltfläche „Weiter“, „Absenden“ oder „Speichern“. Falls ein Bearbeitungsschritt mit nicht ausgefüllten Pflichtfeldern durch die Nutzenden abgebrochen wird, dann entfällt die Pflicht der Eingabe. Eine unmittelbare Client-seitige Validierung inklusive entsprechender Fehlermeldung beim Verlassen eines Feldes (blur-Event) darf nicht geschehen, da man nicht davon ausgehen kann, dass Nutzende Formulareingaben in linearer Reihenfolge tätigen und somit leere und noch zu bearbeitende, aber übersprungene Felder einen ungewollten Fehler verursachen würden.
Sobald ein Fehler durch Nutzende behoben wurde, muss auch die Fehlermeldung unmittelbar wieder entfernt werden und der ursprüngliche Default-Zustand wird wiederhergestellt. Sollte eine erneute Fehleingabe vorliegen, so kann diese nun unmittelbar entdeckt und entsprechend als fehlerhaft markiert werden.
Zustände
Pflichtfeld-Markierungen erben ihre Zustände aus dem jeweiligen Zustand des Elementes, dem sie zugeordnet sind. Im normalen Zustand werden sie in der Textfarbe angezeigt, bei Fehlern im Feld rot.
Inaktive Formularelemente mit einem disabled-Attribut können keine Pflichtfelder sein und verfügen somit auch über keine entsprechende Markierung. Sollten diese Elemente je nach Applikationslogik zu einem späteren Zeitpunkt z. B. durch andere Eingaben aktiv gesetzt werden, so soll erst dann die Kennzeichnung hinzugefügt werden.
Tooltips
Die Markierung von Pflichtfeldern darf nicht über den Inhalt von Tooltips geschehen. Wenn vorhanden, dann muss diese Markierung immer initial sichtbar angezeigt werden.
Do’s and Dont’s
So:
- Gebote der Datensparsamkeit und der Zweckbindung von Daten beachten
So nicht:
- Alle Formularelemente eines Formulars einzeln als Pflichtfelder deklarieren