Das HTML-Element <textarea> ist ein Eingabefeld, das für längere Texte verwendet wird. Während ein normales Textfeld (wie ein Eingabefeld für die E-Mail-Adresse) meist nur wenige Zeichen aufnimmt, ist eine textarea ideal, um größere Mengen an Text einzugeben – z. B. Kommentare, Beschreibungen oder Anfragen.

Im Gegensatz zu einfachen Eingabefeldern hat eine textarea keinen voreingestellten Platz, sondern kann in Größe und Verhalten angepasst werden. So können Nutzer genau die Menge an Text eingeben, die benötigt wird, und die Entwickler können das Feld an ihre Anforderungen anpassen.

Grundlegender Aufbau einer Textarea

Eine Textarea wird mit dem HTML-Tag <textarea> erstellt. Sie hat keinen geschlossenen Doppel-Tag wie <input>; der Text, den ein Benutzer später eingibt, befindet sich zwischen den Eröffnungs- und Schließ-Tags des Elements.

So sieht eine einfache Textarea aus:

<textarea></textarea>

Von alleine ist dieses Feld jedoch winzig. Mit einigen einfachen Attributen kann es jedoch gestaltet werden.

Wichtige Attribute für <textarea>

Es gibt drei grundlegende Attribute, um eine textarea individuell anzupassen:

1. rows – Anzahl der Zeilen

Mit diesem Attribut wird festgelegt, wie hoch das Textfeld ist, also wie viele Zeilen Text der Benutzer auf einmal sehen kann. Wenn du rows="5" angibst, ist die Textarea 5 Zeilen hoch.

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

2. cols – Anzahl der Spalten

Das Attribut cols gibt an, wie breit das Eingabefeld ist. Du definierst damit, wie viele Zeichen in jeder Zeile nebeneinander Platz haben. Wenn du cols="30" wählst, passen etwa 30 Zeichen in jede Zeile.

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

3. wrap – Umbruch des Textes

Das Attribut wrap legt fest, wie der Text in der Textarea behandelt wird, wenn eine Zeile zu lang für das Feld wird. Es gibt drei Möglichkeiten:

• wrap="soft": Der Zeilenumbruch wird ignoriert, und der Text läuft einfach weiter. Beim Absenden bleibt alles in einer Zeile, egal wie lang.
• wrap="hard": Der Text bricht im Sichtfeld der Textarea um, und der Umbruch wird auch beim Absenden mitgesendet.
• Kein Attribut: Standardmäßig verhält sich die Textarea wie bei soft.

Ein Beispiel mit Textarea

So könnte ein typisches Textfeld aussehen, wenn ein Benutzer einen längeren Kommentar oder Hinweis hinterlassen möchte:

<form>
  <p>Dein Feedback:</p>
  <textarea rows="6" cols="40" wrap="hard"></textarea>
</form>

• Dieses Feld ist 6 Zeilen hoch (rows="6"), 40 Zeichen breit (cols="40") und der Text wird automatisch umgebrochen, auch beim Absenden (wrap="hard").
• Es eignet sich z. B. für ein Kontaktformular oder ein Kommentarfeld.

Verwendungsbeispiele für Textareas

Textareas werden besonders oft verwendet, wenn Benutzer größere Mengen an Text eingeben müssen. Hier sind zwei klassische Beispiele:

1. Kommentarfunktion

In einem Blog oder einer Bewertungsplattform können Nutzer Kommentare oder Meinungen zu einem Produkt oder Artikel hinterlassen. Solch ein Textfeld bietet genügend Platz für die Eingabe.

2. Kontaktformular

Ein Kontaktformular mit einer Textarea erlaubt es Nutzern, eine detaillierte Nachricht mit Anliegen oder Fragen zu schreiben, statt nur eine kurze Antwort in einem normalen Textfeld zu geben.

Dieser Text kann nicht mit HTML-Tags wie <strong> oder <em> formatiert werden. Allerdings kann der Inhalt vom Benutzer verändert werden.

Wenn du innerhalb des <textarea>-Tagpaares Text einfügst, zeigt der Browser auch alle im Quelltext enthaltenen Leerzeichen und Zeilenumbrüche an. Das unterscheidet <textarea> von fast allen anderen HTML-Tags und sorgt dafür, dass Leerzeichen und Zeilenumbrüche, die von den Nutzern eingegeben wurden, ebenfalls sichtbar bleiben. Deshalb sollte der Text in <textarea>-Elementen nicht wie üblich durch Tabulatoren eingerückt werden.

Es gibt jedoch selten eine praktische Notwendigkeit, Standardtext direkt in einer <textarea> anzugeben. Daher ist es sinnvoll, dieses Element direkt leer zu lassen und gleich zu schließen.