Mehrzeiliges Eingabefeld in HTML mit TEXTAREA-Tag

Formulare, die auf Webseiten bereitgestellt werden, enthalten häufig mehrzeilige Eingabefelder. Im Gegensatz zu einzeiligen Eingabefeldern ermöglichen diese auch lange Texteingaben mit Zeilenumbrüchen. So kann man lange Textpassagen eingeben und mit dem Formular abschicken. Sie werden z.B. in Foren eingesetzt, damit die Benutzer lange Textbeiträge erstellen können. Auch zum Abschicken von Nachrichten über ein Kontaktformular sind sie geeignet. Die Anwendungen können beliebig sein.

Mehrzeiliges Eingabefeld mit TEXTAREA-Tag

HTML-Code für mehrzeilige Eingabefelder

Um ein mehrzeiliges Eingabefeld zu erzeugen, verwendet man den TEXTAREA-Tag. Ein Beispielcode.

<textarea></textarea>

Im Gegensatz zum INPUT-Tag gehört der TEXTAREA-Tag nicht zu den selbst schließenden Elementen und enthält einen Start- und End-Tag. Ein mehrzeiliges Eingabefeld kann mit einem Wert vorbelegt werden, der ggf. vom Benutzer überschrieben werden kann. Auch hierbei unterscheidet sich der TEXTAREA-Tag vom INPUT-Tag. Beim INPUT-Tag erfolgt die Vorbelegung über das Attribut value="...". Beim TEXTAREA-Tag wird der Wert zwischen dem Start- und End-Tag geschrieben. Ein Beispielcode, um das Eingabefeld mit dem Wert "Standardtext im Textfeld" zu belegen.

<textarea>Standardtext im Textfeld</textarea>

Attribute bei mehrzeiligen Eingabefeldern

Die Attribute, die bei einzeiligen Eingabefeldern verwendet werden können, können meistens auch bei mehrzeiligen Eingabefeldern verwendet werden. Diese sind ausführlich unter Attribute bei einzeiligen Eingabefeldern beschrieben und können dort entnommen werden. Daher werden auf dieser Seite lediglich die Abweichungen beschrieben, die für mehrzeilige Eingabefelder gelten, jedoch nicht für einzeilige Eingabefelder und umgekehrt.

Folgende Attribute sind für einzeilige Eingabefelder gültig, jedoch nicht für mehrzeilige: autocomplete, list, pattern, size, value. 

Größe des Textbereichs

Die Größe eines mehrzeiligen Eingabefelds wird in Zeilen und Spalten (Anzahl der Zeichen) angegeben. Gibt man keine Größe an, handhaben die Browser die Größe unterschiedlich. Bei manchen Browsern kann der Textbereich zwei Zeilen hoch sein, bei anderen wiederum drei oder mehr. Die Größe des Textbereichs gibt man mit den Attributen cols="..." (Spalten) und rows="..." (Zeilen) an. Ein Beispielcode für ein Eingabefeld mit einer Breite von 20 Zeichen und einer Höhe von 5 Zeilen.

<textarea cols="20" rows="5"></textarea>

Zeilenumbruch bei mehrzeiligen Eingabefeldern

Ein Merkmal von mehrzeiligen Eingabefeldern ist, dass sie mehrere Zeilen und somit auch Zeilenumbrüche enthalten können. Manuell gesetzte Zeilenumbrüche werden an das Script übertragen, das die Daten verarbeiten soll. Bei den Zeilenumbrüchen am Ende einer Zeile kann das Verhalten beeinflusst werden. Das geschieht durch das Attribut wrap="...". Folgende Werte können gesetzt werden.

  • off: Am Zeilenende erfolgt kein Zeilenumbruch. Standardmäßig werden dabei Scrollleisten eingeblendet, wenn der Text breiter als das Eingabefeld ist.
  • virtual: Am Zeilenende erfolgen automatisch Zeilenumbrüche. Jedoch sind diese rein visuell. An das Script werden die Daten nämlich ohne Zeilenumbrüche übertragen. Wenn das Attribut nicht gesetzt wird, entspricht das Standardverhalten dem des wrap="virtual".
  • physical: Am Zeilenende erfolgen automatisch Zeilenumbrüche, die auch an das Script übertragen werden.

Das Attribut wrap ist in HTML4 und XHTML (1.0, 1.1) kein offizieller Standard. Trotzdem war das Verhalten zumindest in den meisten Browser wie beschrieben implementiert, konnte jedoch auch abweichend sein.

Attribute in HTML5

Ab HTML5 sind viele neue Attribute hinzugekommen. Auch das Attribut wrap wurde Bestandteil der Spezifikationen. Hierbei werden jedoch folgende Werte verwendet.

  • soft: Entspricht dem Verhalten von virtual.
  • hard: Entspricht dem Verhalten von physical.

Nachfolgend einige kommentierte Beispielcodes für das Attribut wrap.

<!-- In HTML5 -->

<!-- Nur visuelle Zeilenumbrüche am Zeilenende -->
<textarea wrap="soft"></textarea>

<!-- Entspricht dem Verhalten von wrap="soft" -->
<textarea></textarea>

<!-- Zeilenumbrüche am Zeilenende, die übertragen werden -->
<textarea wrap="hard"></textarea>
  • maxlength: Für den TEXTAREA-Tag erst ab HTML5 gültig. Der Wert wird numerisch eingetragen, z.B. in der Form maxlength="200", mit dem die maximale Anzahl der Zeichen für das Eingabefeld festgelegt wird. 

Positionierung des TEXTAREA-Tags innerhalb von Block-Elementen

Die zuvor beschriebenen Codebeispiele haben einen kleinen Schönheitsfehler. Denn, der TEXTAREA-Tag ist ein Inline-Element und muss für die korrekte Syntax von einem Block-Element umschlossen werden, z.B. mit einem DIV- oder P-Tag. Ein Beispielcode.

<div><textarea></textarea></div>

Die Formatierung des Textbereichs und des umschließenden Block-Elements kann über CSS erfolgen.