Inhaltsbereich Navigation Navigation Fußzeile

Textarea

Verwendung

Textareas dienen der Eingabe größerer Mengen von Text, die üblicherweise über den in einem input type="text" zur Verfügung stehenden Platz hinausgeht.

Sofern möglich sollten Textareas immer die Größe der maximal zulässigen Textmenge haben; diese muss über die entsprechenden HTML-Attribute cols & rows gesetzt werden. Viele Browser lassen es jedoch zu, dass Nutzende eine textarea vergrößern können – wenn dies unerwünscht sein sollte, dann lässt es sich über die Vergabe der CSS-Regel textarea {resize: none} unterbinden.

Bei Textareas mit fachlich vorgegebener Mengenbegrenzung per maxlength verfügt das Element idealerweise über einen Zähler, der die verbliebene Anzahl eingebbarer Zeichen herunterzählt. Bitte beachten sie hierzu auch die Hinweise unter Barrierefreiheit.

Beschriftung

Texteingabefelder vom typ textarea benötigen zwingend eine Beschriftung, in welcher der Zweck und ggf. 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.

Tooltips

Textareas 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:

  • Dimensionen entsprechen den maximal eingebbaren Zeichen

So nicht:

  • Fälle in denen sehr kurze Eingaben zu erwarten sind