1. Container
2. Text Label
3. Eingabefeld
4. Hinweistext

Im einzeiligen Eingabefeld können Informationen eingegeben werden.

Je nach Einsatz kann das Feld mit Hinweistext und/oder einer maximalen Zeichenanzahl versehen sein. Pflichtfelder sind mit “*” (Sternchen”) nach dem Label markiert. Bei Read-Only-Feldern gibt es keine visuelle Pflichtfeldauszeichnung, auch wenn diese im Backend ggf. als Pflichtfelder geprüft werden.

Die Eingabefeldbezeichnung sollte so kurz und präzise wie möglich formuliert sein. Sollte ein Label dennoch länger sein müssen, so bricht es um und wird mehrzeilig.

Wenn eine maximale Zeichenzahl definiert wird:

Bei Erreichen der maximal erlaubten Zeichenzahl wird keine weitere Eingabe zugelassen. Bei jedem weiteren Tastenanschlag (keydown) ertönt ein akustisches Signal: Fehlermeldung (siehe akustische Signale).

Wenn keine maximale Zeichenzahl definiert wird: 
Die Standardanzahl erlaubter Zeichen beträgt 255. Da dies abhängig von der technischen Umgebung ist, kann die Anzahl aber auch variieren. Falls die eingegebene Zeichenanzahl das Zeichenlimit überschreitet, wird bei Verlassen des Feldes ein Validierungsfehler an Formularfeldern ausgelöst (siehe Formular: Validierungsfehlern an Formularfeldern). Die Fehlermeldung lautet „Maximale Zeichenanzahl überschritten: [Eingegebene Zeichen im Feld]/[technisch maximal mögliche Zeichen]”.
Das Standardverhalten für Fehlermeldungen findet Anwendung (siehe Formular: Ablauf Front-/Backend-Validierung).

Bei fehlerhaften oder fehlenden Eingaben (Ablauf siehe Formulare: Ablauf Front-/Backend-Validierung) erscheint ein Ausrufezeichen-Icon mit erklärendem Text, dieses muss als Layoutgrafik deklariert werden. Gleichzeitig ertönt ein akustisches Signal: Fehlermeldung (siehe akustische Signale).

Die Standardfehlermeldungen bei falscher Eingabe lauten:

• “Nur Buchstaben und Zahlen erlaubt”
• “Nur Buchstaben erlaubt” 

Details zur Anwendung der Standardfehlermeldungen sind im Meldungskonzept beschrieben (siehe Meldungskonzept: Standard-Meldungen für Formular-Validierungsfehler). Bei anderen Fehlermeldungen sind die Formulierungsregeln für Formular-Valididierungsfehler zu beachten (siehe Meldungskonzept: Formulierungsregeln für Formular-Validierungsfehler).

Das IBAN-Eingabefeld ist ein Sonderfall des einzeiligen Eingabefeldes. Es unterscheidet sich in folgendem: 

Die Zeichenzahl ist auf 48 Zeichen begrenzt.

Erklärung: 34 Zeichen ist die maximale Zeichenzahl bei internationalen IBANs (bei deutschen IBANS 22 Stellen) + max. 9 Leerzeichen (für deutsche IBANS 5 Leerzeichen).

Nutzende können die IBAN mit oder ohne Leerzeichen eingeben. Buchstaben können groß oder klein geschrieben werden. Während der Eingabe wird keine Umformatierung vorgenommen.

Nach Verlassen des Feldes wird der Inhalt umformatiert: 

• Nach jedem vierten eingegebenen Zeichen wird ein Leerzeichen eingefügt. 
• Ggf. überflüssige Leerzeichen werden entfernt.
• Ggf. klein geschriebene Buchstaben zu Beginn der IBAN werden in Großbuchstaben umformatiert

Bei erneuten Fokuserhalt des Eingabefeldes bleiben die Leerzeichen erhalten und Nutzer:innen müssen diese ggf. händisch löschen. Wird das Feld wieder verlassen, werden erneut die Umformatierung (siehe oben) durchgeführt.

Wenn Nutzende den Feldinhalt kopieren, so wird der Wert inklusive Leerzeichen, so wie er im Feld steht, in die Zwischenablage eingefügt.

Der Speicherwert des Feldes in der Datenbank ist weiterhin der unformatierte Wert ohne Leerzeichen (ist noch technisch zu entscheiden).

Die Standardfehlermeldung bei falscher IBAN lautet, unabhängig davon, ob der Fehler durch fehlerhaftes Eingabeformat oder eine falsche Prüfsumme entsteht:

• “Keine gültige IBAN”

(siehe Meldungskonzept: Formular-Validierungsfehler - Standard-Meldungen)

Telefonnummern werden in einem einzeiligen Eingabefeld (ohne Umformatierungen) erfasst, dabei wird zwischen Festnetz- und Mobilfunknummer unterschieden.

Die Telefonnummer muss gemäß ISO 5008 eingetragen werden. Beim Verlassen des Feldes wird die Eingabe validiert und ggf. ein Fehler angezeigt.

Unter Festnetznummernfelder wird immer folgender Hinweistext zum Eingabeformat angezeigt: “Formatbeispiel: 030 12345-67 (nur für Deutschland) oder +31 20 1234567 (international)“. Bei Mobilfunknummernfeldern lautet der Hinweistext: “Formatbeispiel: 0171 123456 (nur für Deutschland) oder +31 6 1234567 (international)“.

Bei Bedarf kann zusätzlich zur Formatbeschreibung noch ein fachlicher Hinweistext am Feld ergänzt werden. Dieser wird mit einem Gedankenstrich getrennt vor dem Formathinweis angezeigt: “[Fachlicher Hinweis] – [Formathinweis]”.

Die Standardfehlermeldung bei falsch eingegebener Telefonnummer lautet “Falsches Eingabeformat” (siehe Meldungskonzept: Formular-Validierungsfehler - Standard-Meldungen)

Das E-Mail-Eingabefeld ist ein Sonderfall des einzeiligen Eingabefeldes. Es unterscheidet sich in folgendem:

Erlaubt ist die Eingabe von Buchstaben, Zahlen, Punkte, Bindestriche, Unterstriche und dem Sonderzeichen “@”. Die Eingabe von anderen Sonderzeichen, Leerzeichen, Akzentbuchstaben oder Buchstaben außerhalb des lateinischen Alphabets ist nicht erlaubt. Das Sonderzeichen “@” muss in der Eingabe verwendet werden, darf aber nur ein mal vorkommen. Zudem muss die E-Mail mit einer gültigen Top-Level-Domain (z.B “.de”,”.com”, “.net”) enden.

Beispiel:

• beispiel@behoerde.de

Siehe [Einzeiliges Eingabefeld]

Die Standardfehlermeldung bei fehlerhafter E-Mail (z.B. durch falsche Top-Level-Domain) lautet:

• “Keine gültige E-Mail”

(siehe Meldungskonzept: Formular-Validierungsfehler - Standard-Meldungen)

Wie im normalen einzeiligen Eingabefeld, kann hier ein beliebiger Zahlenwert eingegeben werden. Dabei wird die Einheit des einzugegenen Wertes stets als Teil des Feldlabels angegeben:
"[Feldtitel] in [Einheit]"

Pflichtfelder sind mit “*” (Sternchen) nach dem Label markiert.

Numerische Werte werden im deutschen Format eingegeben. Dabei wird "Punkt" für 1000-Trennzeichen und "Komma" für die Unterteilung in Nachkommastellen verwendet.

Falls es eine fachliche Anforderung gibt, dass Werte in eine einheitliche Form gebracht werden sollen (Beispiel: Geldbeträge immer mit zwei Nachkommastellen), dann geschieht die Umformatierung erst bei Verlassen des Feldes (siehe Eingabefeld: Verhalten bei Eingabe einer IBAN).

Für allgemeine Richtlinien zur Darstellung von Einheiten, siehe Schriften: Allgemeines zur Darstellung von Einheiten und Sonderzeichen.

Standardfehlermeldung für Zahlenfelder lauten:

• “Nur Zahlen zulässig im Format 1.234,56”
• Wenn nur positive Zahlen zugelassen: “Nur positive Zahlen zulässig im Format 1.234,56” 
• Wenn nur negative Zahlen zugelassen: “Nur negative Zahlen zulässig im Format -1.234,56”
• Wenn nur Ganzzahlen erlaubt sind: “Nur Ganzzahlen zulässig im Format 1.234”
• Wenn nur positive Ganzzahlen erlaubt sind: “Nur positive Ganzzahlen zulässig im Format 1.234”
• Wenn nur negative Ganzzahlen erlaubt sind: “Nur negative Ganzzahlen zulässig im Format -1.234”

Details zur Anwendung der Standardfehlermeldungen sind in den Standard-Meldungen beschrieben (siehe Meldungskonzept: Formular-Validierungsfehler - Standard-Meldungen).

Ist das zulässige Format des Eingabefeldes nicht mit den oben beschriebenen Standardmeldungen abgedeckt, z. B. nur eine Nachkommastelle zulässig oder führende Nullen erforderlich, ist dies fachlich zu beschreiben. Die Fehlermeldung setzt sich aus den oben genannten Varianten (Zahlen allgemein; nur positive Zahlen etc.) und einem aussagekräftigen Beispiel zusammen. Das Beispiel des definierten Formats ist so zu wählen, dass es zum fachlichen Kontext passt und einfach verständlich ist.:

• “Nur [Zahlenformat] zulässig im Format [Beispiel definiertes Format]” (Beispiele: Positive Ganzzahlen mit führenden Nullen: “Nur positive Ganzzahlen zulässig im Format 001” | Zahlen mit einer Nachkommastelle: “Nur Zahlen zulässig im Format 1.234,5”)

Bei anderen Fehlermeldungen sind die Formulierungsregeln für Formular-Valididierungsfehler zu beachten (siehe Meldungskonzept: Formulierungsregeln für Formular-Validierungsfehler).

Wie im normalen einzeiligen Eingabefeld, kann hier ein beliebiger Wert eingegeben werden. 

Pflichtfelder sind mit “*” (Sternchen”) nach dem Label markiert. Bei Read-Only-Feldern gibt es keine visuelle Pflichtfeldauszeichnung, auch wenn diese im Backend ggf. als Pflichtfelder geprüft werden.

Die Eingabefeldbezeichnung sollte so kurz und präzise wie möglich formuliert sein. Sollte ein Label dennoch länger sein müssen, so bricht es um und wird mehrzeilig.

Fangen Nutzende im Eingabefeld an zu Tippen, so wird nach Eingabe des ersten Zeichens eine Vorschlagliste angezeigt, sofern Werte aus der hinterlegten statischen Liste bzw. einer angebundenen Datenbanktabelle mit dem eingegebenen Wert übereinstimmen. Zwischen jeder Wertänderungen und der entsprechenden Aktualisierung der Trefferliste besteht eine Verzögerung von 400ms. So haben Nutzende die Möglichkeit, Ihre Eingabe zunächst zu beenden (statt Ausführen der Aktion bei jedem Tastendruck).

Basierend auf fachlicher Anforderung sollte definiert werden, ob eine der folgenden Suchverhalten gilt:

• “Beinhaltet [...]” – Sucht nach Zeichenabfolgen, die irgendwo innerhalb der Bezeichnung vorkommen.
• “Startet mit [...]” – Sucht nur nach Zeichenabfolgen die am Anfang der Bezeichnung stehen.

Falls nicht definiert gilt die Regel “Beinhaltet [Suchbegriff]”.

Der mit dem Suchbegriff übereinstimmende Textabschnitt in der Vorschlagliste ist im Schriftschnitt Bold gesetzt. Der restliche Text des Vorschlags ist in Regular gesetzt.

Sobald Ergebnisse gefunden oder aktualisiert wurden, wird vom Screenreader die Anzahl der gefundenen Einträge automatisch ausgeben. Text: “[Anzahl] Vorschläge vorhanden”

Falls die Serverabfrage für die Suche länger dauert (über 200ms), wird ein Ladezustand (loading spinner) im Dropdown angezeigt, bis Suchergebnisse vorhanden sind. Der Alternativtext des Symbols, der vom Screenreader ausgegeben wird lautet “Ergebnisse werden geladen”. Dies wird nur ausgegeben, wenn das Laden davor länger als 2 Sekunden gedauert hat und die Ergebnisse nicht vorher sichtbar wurden.

Falls das Laden noch länger dauert, wird alle 10 Sekunden erneut der Alternativtext des Ladesymbols “Ergebnisse werden geladen” ausgelesen.
Noch offen: Verhalten bei ausbleibender Server-Antwort (Hier ist vorher die technische Umsetzung zu klären)

Bei Erreichen des Maximalwerts wird keine weitere Eingabe zugelassen. Bei jedem weiteren Tastenanschlag (keydown) ertönt ein akustisches Signal: Fehlermeldung (siehe akustische Signale).

Bei fehlerhaften oder fehlenden Eingaben (Ablauf siehe Formulare: Ablauf Front-/Backend-Validierung) erscheint ein Ausrufezeichen-Icon mit erklärendem Text. Das Icon muss als Layoutgrafik deklariert werden. Gleichzeitig ertönt ein akustisches Signal: Fehlermeldung (siehe akustische Signale).

(Standard-)Fehlermeldungen und Formulierungsregeln für Fehlermeldungen sind identisch zum einzeiligen Eingabefeld siehe oben Fehlerfälle / Validierung Einzeiliges Eingabefeld.

Im Read-Only Status verhält sich das Element wie ein normales schreibgeschütztes Eingabefeld und die Vorschlagliste wird nicht mehr angezeigt.

Verhalten der Ausklappliste bei kleiner Bildschirmhöhe (siehe Eingabe- und Auswahlfeldern: Ausklapplisten bei kleiner Bildschirmhöhe).

Verhalten der Ausklappliste bei über 100 gefundenen Treffern (siehe Eingabe- und Auswahlfeldern: Ausklapplisten bei mehr als 100 Einträgen).

Mehrzeilige Eingabefelder wachsen mit Ihrem Inhalt. Somit ist ein Scrollen innerhalb von Eingabefeldern nie erforderlich. Die Breite wird im Layout vordefiniert und die Höhe wird durch die Textmenge bestimmt und passt sich adaptiv während der Eingabe an.

Pflichtfelder sind mit “*” (Sternchen”) nach dem Label markiert. Bei Read-Only-Feldern gibt es keine visuelle Pflichtfeldauszeichnung, auch wenn diese im Backend ggf. als Pflichtfelder geprüft werden.

Die Eingabefeldbezeichnung sollte so kurz und präzise wie möglich formuliert sein. Sollte ein Label dennoch länger sein müssen, so bricht es um und wird mehrzeilig. Das Eingabefeld vergrößert sich dann entsprechend (siehe Beispiele).

In der Regel ist eine zulässige Zeichenzahl definiert. Darüber hinaus kann kein Inhalt eingegeben werden. 

Bei fehlerhaften oder fehlenden Eingaben (Ablauf siehe Formulare: Ablauf Front-/Backend-Validierung) erscheint ein Ausrufezeichen-Icon mit erklärendem Text, dieses muss als Layoutgrafik deklariert werden. Gleichzeitig ertönt ein akustisches Signal: Fehlermeldung (siehe akustische Signale).

(Standard-)Fehlermeldungen, Formulierungsregeln für Fehlermeldungen und das Verhalten bei Erreichen einer definierten maximalen Zeichenanzahl des Feldes sind identisch mit dem einzeiligen Eingabefeld. (siehe oben Fehlerfälle / Validierung Einzeiliges Eingabefeld).

Wenn keine maximale Zeichenzahl definiert wird: 
Die Standardanzahl erlaubter Zeichen beträgt in der Regel 2000. Da dies abhängig von der technischen Umgebung ist, kann die Anzahl aber auch variieren. Falls die eingegebene Zeichenanzahl das Zeichenlimit überschreitet, wird bei Verlassen des Feldes ein Validierungsfehler an Formularfeldern ausgelöst (siehe Formular: Validierungsfehlern an Formularfeldern). Die Fehlermeldung lautet „Maximale Zeichenanzahl überschritten: [Eingegebene Zeichen im Feld]/[technisch maximal mögliche Zeichen]”.
Das Standardverhalten für Fehlermeldungen findet Anwendung (siehe Formular: Ablauf Front-/Backend-Validierung).

Im Read-Only-Zustand passt sich die Feldhöhe dem eingegebenen Inhalt an, so dass zum einen der komplette Text lesbar ist, zum anderen keine optischen Lücken in Formularen entstehen, wenn wenig Text eingegeben wurde.

Wenn bei Feldern die Eingabe aktuell nicht möglich ist wird der Disabled Status verwendet. 
Read-Only Felder kommen zum Einsatz, wenn nur Informationen dargestellt werden, diese aber nicht veränderbar sind.

Das Ausrufezeichen-Symbol, bei fehlerhafter Eingabe, muss als Layoutgrafik deklariert werden. Gleichzeitig ertönt ein akustisches Signal: Fehlermeldung (siehe akustische Signale).

Das Ausrufezeichen bei fehlerhafter Eingabe in mehrzeiligen Eingabefeldern muss als Layoutgrafik deklariert werden. Gleichzeitig ertönt ein akustisches Signal: Fehlermeldung (siehe akustische Signale).

Screenreaderausgabe einer Telefonnummer

Der Screenreader muss im Formatbeispiel die Nummer inklusive Lehrzeichen ausgeben.

• Mit der Tab-Taste wird das Eingabefeld fokussiert. Bei ggf. bereits vorhandenem Text wird dieser komplett ausgewählt, bis neuer Text eingegeben oder die Markierung durch Pfeil links oder rechts aufgehoben wird und der Cursor an den Anfang oder das Ende des Textes springt.
• Dann kann Text eingegeben werden. 
• Durch erneuten Klick auf die Tab-Taste, wird das nächste Interaktionselement fokussiert, und das aktuelle springt zurück zum Default-Zustand (leer oder gefüllt, je nach Eingabe).

• Mit der Tab-Taste wird das Eingabefeld fokussiert. Bei ggf. bereits vorhandenem Text wird dieser komplett ausgewählt, bis neuer Text eingegeben oder die Markierung durch Pfeil links oder rechts aufgehoben wird und der Cursor an den Anfang oder das Ende des Textes springt.
• Dann kann Text eingegeben werden.
• Sobald Nutzende mind. ein Zeichen eingegeben haben, wird eine Liste mit Vorschlägen angezeigt. Mit jedem getippten Buchstaben wird die Liste gefiltert auf Begriffe, die mit der eingegebenen Zeichenfolge beginnen bzw. die Zeichenfolge beinhalten. 
• Auch bei mit Backspace entfernten Zeichen wird die Liste entsprechend aktualisiert.
• Falls vorher bereits ein Wert im Eingabefeld eingegeben war, wird die Vorschlagliste erst geöffnet, nachdem mindestens ein Zeichen hinzugefügt oder entfernt wurde. 
• Nach dem Einblenden der Vorschlagliste sollte nicht automatisch der erste Eintrag markiert sein. 
• Mit der Pfeiltaste nach unten wird der erste Eintrag visuell hervorgehoben. Der Tastaturfokus bleibt im Eingabefeld.
• Mit den Pfeiltasten nach unten/oben kann zum nächsten/vorherigen vorgeschlagenen Werte gewechselt werden. Der Systemfokus bleibt währenddessen im Eingabefeld und der Cursor blinkt weiterhin.
• Pfeiltaste nach unten bei über 100 Treffern und visuell hervorgehobenen hundertsten Eintrag setzt die visuelle Hervorhebung auf den “und x weitere [...]”-Eintrag.
• Enter wählt den hervorgehobenen Vorschlag aus der Liste aus und schließt die Vorschlagliste.
• Enter bei visuell hervorgehobenen “und x weitere [...]”-Eintrag löst keine Aktion aus. Die Vorschlagliste bleibt geöffnet und die visuelle Hervorhebung bleibt auf dem Element.
• Mit Escape kann die Liste geschlossen werden, ohne dass eine Auswahl getätigt wird.
• Durch Drücken der Tab-Taste, wird das nächste Interaktionselement fokussiert und die bestehende Eingabe im Textfeld bleibt unverändert bestehen.

• Mit der Tab-Taste wird das Eingabefeld fokussiert. Bei ggf. bereits vorhandenem Text wird dieser komplett ausgewählt, bis neuer Text eingegeben oder die Markierung durch Pfeil links oder rechts aufgehoben wird und der Cursor an den Anfang oder das Ende der jeweiligen Zeile springt.
• Dann kann Text eingegeben werden. 
• Mit Return können Zeilenumbrüche oder Absätze eingefügt werden.
• Durch erneuten Klick auf die Tab-Taste, wird das nächste Interaktionselement fokussiert, und das aktuelle springt zurück zum Default-Zustand (leer oder gefüllt, je nach Eingabe).

• Durch Klick mit linker Maustaste auf das Eingabefeld wird es fokussiert. Bei leerem Eingabefeld wird der Cursor an den Anfang gesetzt, bei bereits vorhandenem Text wird er an die entsprechende Stelle gesetzt. 
• • Single-Klick: Cursor wird an Position gesetzt
  • Double-Klick: Aktuelles Wort wird selektiert
  • Tripple-Klick: Gesamter Text-Inhalt wird selektiert
• Dann kann Text eingegeben werden.

• Durch Klick mit linker Maustaste auf das Eingabefeld wird es fokussiert. Bei leerem Eingabefeld wird der Cursor an den Anfang gesetzt, bei bereits vorhandenem Text wird er an die entsprechende Stelle gesetzt. 
• • Single-Klick: Cursor wird an Position gesetzt
  • Double-Klick: Aktuelles Wort wird selektiert
  • Tripple-Klick: Gesamter Text-Inhalt wird selektiert
• Sobald Nutzende mindestens ein Zeichen im Feld eingegeben haben, wird eine Liste mit passenden Vorschlägen angezeigt. Mit jedem getippten Buchstaben wird die Liste gefiltert auf Begriffe, die mit der eingegebenen Zeichenfolge beginnen.
• Falls vorher bereits ein Wert im Eingabefeld eingegeben war, wird die Vorschlagliste erst geöffnet, nachdem mindestens ein Zeichen hinzugefügt oder entfernt wurde. 
• Klick mit linker Maustaste auf einen der vorgeschlagenen Werte wählt diesen aus und schließt das Dropdown.
• Klick mit linker Maustaste auf den “und x weitere [...]”-Eintrag bei über 100 Treffern hebt diesen visuell hervor aber löst ansonsten keine Aktion aus. Die Vorschlagliste bleibt geöffnet.
• Ein Klick mit linker Maustaste außerhalb des Dropdowns und des Eingabefeldes an eine beliebige Stelle auf dem Screen schließt das Dropdown, ohne, dass eine Auswahl getätigt wird.
• Durch Klick mit linker Maustaste auf ein anderes interaktives Element auf der Seite, wird dieses fokussiert.

• Durch Klick mit linker Maustaste auf das Eingabefeld wird es fokussiert. Bei leerem Eingabefeld wird der Cursor an den Anfang gesetzt, bei bereits vorhandenem Text wird er an die entsprechende Stelle gesetzt. 
• • Single-Klick: Cursor wird an position gesetzt
  • Double-Klick: Aktuelles Wort wird selektiert
  • Tripple-Klick: Gesamter Text-Inhalt wird selektiert
• Dann kann Text eingegeben werden.