Inhaltsbereich Navigation Navigation Fußzeile

Input Text

Verwendung

Text-Input mit Label

Eingabefelder vom Typ input type="text" dienen der Eingabe von alphanumerischen Zeichenfolgen, inklusive der alleinigen Eingabe von Zahlen.

In den überwiegenden Fällen haben diese Eingabefelder keine inhärenten Breiten in sich, sondern richten sich nach den Spalten des Gestaltungsrasters, in denen sie eingesetzt werden (siehe Kapitel Formularelemente im Grid). Eingabefelder, die eine klar bestimmte Zeichenmenge benötigen, sollten allerdings mittels fester Breiten so angelegt werden, dass sie exakt die Breite der einzugebenden Daten zeigen, z. B. Jahreszahlen immer vierstellig.

Das Design System macht keine generellen Vorgaben für die maximale Länge der möglichen Eingaben, da dies abhängig von fachlichen und inhaltlichen Anforderungen ist; ab einer Textlänge, die über den zur Verfügung stehenden Platz hinausgehen sollte allerdings der Einsatz einer Textarea als Alternative erwogen werden, insbesondere auch im Hinblick auf die mobile Darstellung.

Eingabefelder vom Typ `"text"` sind beliebig mit anderen Feld-Typen kombinierbar. Eine solche Kombination kann eine eigenständige Gestaltung erhalten, wenn eine entsprechende Visualisierung die Erkennbarkeit unterstützt, wie zum Beispiel bei der Eingabe von KFZ-Kennzeichen oder Verifizierungs-Codes.
Beispielhafte Darstellung eines gestalteten KFZ-Kennzeichens mit 3 getrennten Eingabefeldern.

Beschriftung

Felder vom Typ input type="text" benötigen zwingend eine Beschriftung, in welcher der Zweck und, wenn nötig, auch das erwartete Format beschrieben wird. Dies wird über ein implizit oder explizit verknüpftes <label> erreicht.

Wenn kein ausreichender Platz für ein sichtbares Label zur Verfügung steht (z. B. in Tabellen), dann ist auch ein äquivalentes aria-label oder ein visuell nicht sichtbares <label> zulässig. In diesem Fall muss darauf geachtet werden, dass sich der Zweck des Feldes visuell und programmatisch aus dem Kontext ergibt, wie zum Beispiel in Tabellen über einen entsprechend betexteten Spalten- oder Zeilen-Kopf.

Beispielhafte Darstellung von Feldern im Fehler-Zustand

Tooltips

Texteingabefelder können ein zugeordnetes Tooltip erhalten, das entweder Bestandteil der Feldbeschriftung ist, oder programmatisch verknüpft nach dem Formularelement steht.

Inaktive Elemente

Inaktive Elemente mit disabled-Attribut sind visuell deutlich als solche gekennzeichnet, z. B. wenn sie in der Applikationslogik aufgrund fehlender vorhergehender Auswahlen noch nicht aktiv sein können. Sie beinhalten keine Daten.

Rein darstellende Elemente mit readonly-Attribut sind bereits serverseitig mit Daten befüllt, die nicht mehr editierbar sind, und erhalten eine eigenständige Gestaltung, die ihren Zweck visualisiert. Optional können readonly-Felder zugeordnete weitere Inhalte haben, mit denen die Herkunft der vorbefüllten Daten vermittelt wird, z. B. durch ein ELSTER-Logo.

Do’s and Dont’s

So:

  • Breite von Eingabefeldern mit Längenbegrenzungen, die dem einzugebenden Text entspricht
  • Browser-seitige Plausibilitätsprüfung (als Komfortmerkmal, darf nicht die zusätzliche serverseitige Plausibilitätsprüfung ersetzen)

So nicht:

  • Eingegebener Text ist nicht bei allen Breakpoints vollständig sichtbar
  • Textmengen, die ein mehrzeiliges Feld erfordern, vgl. Textarea
  • Verwendung wenn es bereits bekannte Auswahl-Optionen gibt, vgl. Select oder Radiobutton