<textarea>

Zuletzt aktualisiert am 3. Februar 2026

Das <textarea>-Element erstellt ein mehrzeiliges Texteingabefeld in Formularen. Im Gegensatz zum einzeiligen <input type="text"> eignet sich textarea für längere Texte wie Kommentare, Nachrichten, Feedback oder Beschreibungen. Der Nutzer kann mehrere Zeilen Text eingeben und der Inhalt wird automatisch umgebrochen.

Grundlagen

Das textarea-Element unterscheidet sich in mehreren wichtigen Punkten von input-Feldern. Es ist immer mehrzeilig und erlaubt Zeilenumbrüche. Die Größe wird über die Attribute rows (Zeilen) und cols (Spalten) gesteuert, kann aber vom Nutzer meist per Drag-and-Drop verändert werden.

Ein wichtiger Unterschied zu input: Der Textinhalt steht zwischen den öffnenden und schließenden Tags, nicht im value-Attribut. Der Inhalt zwischen den Tags wird als Standardtext angezeigt.

Syntax

<label for="kommentar">Dein Kommentar:</label>
<textarea id="kommentar" name="kommentar" rows="4" cols="50">
  Schreib hier deinen Kommentar...
</textarea>

Attribute

Beispiele

Einfaches Kommentarfeld

Ein typisches Kommentarfeld mit Label und passender Größe. Das Label ist über die id mit dem textarea verknüpft, was die Barrierefreiheit verbessert.

<label for="kommentar">Dein Kommentar:</label>
<textarea
  id="kommentar"
  name="kommentar"
  rows="5"
  cols="50"
  placeholder="Was möchtest du mitteilen?"
></textarea>

Textfeld mit Zeichenlimit

Ein textarea mit maximalem Zeichenlimit. Der Hinweistext unter dem Feld informiert den Nutzer über die verbleibenden Zeichen. In der Praxis würde man dies mit JavaScript dynamisch aktualisieren.

<label for="beschreibung">Produktbeschreibung:</label>
<textarea
  id="beschreibung"
  name="beschreibung"
  rows="4"
  cols="50"
  maxlength="200"
  placeholder="Beschreibe dein Produkt in max. 200 Zeichen"
></textarea>
<small id="char-count">Noch 200 Zeichen verfügbar</small>

Readonly-Textfeld

Ein schreibgeschütztes textarea, das oft für AGB, Lizenzbedingungen oder andere Texte verwendet wird, die der Nutzer lesen aber nicht ändern soll.

<label for="agb">Allgemeine Geschäftsbedingungen:</label>
<textarea id="agb" name="agb" rows="6" cols="50" readonly>
§1 Geltungsbereich
Diese AGB gelten für alle Verträge...

§2 Vertragsabschluss
Der Vertrag kommt zustande durch...
</textarea>

Barrierefreiheit

Für barrierefreie Textfelder solltest du immer ein <label>-Element verwenden, das über die id mit dem textarea verknüpft ist. Das ermöglicht Screenreadern, den Zweck des Feldes klar zu kommunizieren.

Bei zusätzlichen Hinweisen oder Fehlermeldungen nutze das aria-describedby-Attribut, um auf erklärende Texte zu verweisen. Das hilft Nutzern von assistiven Technologien, alle relevanten Informationen zu erhalten.

<label for="nachricht">Deine Nachricht:</label>
<textarea
  id="nachricht"
  name="nachricht"
  rows="5"
  aria-describedby="nachricht-hint"
></textarea>
<small id="nachricht-hint">
  Bitte beschreibe dein Anliegen so genau wie möglich
</small>

Häufige Fehler

textarea für einzeilige Eingaben verwenden: Ein häufiger Fehler ist, textarea für kurze einzeilige Texte zu nutzen. Verwende stattdessen <input type="text">. textarea ist nur für mehrzeilige Inhalte gedacht.

Fehlende Größenangaben: Ohne rows und cols hat das textarea eine Browser-abhängige Standardgröße, die oft nicht zur restlichen Seite passt. Gib immer explizite Werte an oder style das Feld mit CSS.

value-Attribut verwenden: Anders als bei input-Elementen funktioniert das value-Attribut bei textarea nicht. Der Standardinhalt steht zwischen den öffnenden und schließenden Tags: <textarea>Standardtext</textarea>.

Leerzeichen und Einrückung: Alle Zeichen zwischen den Tags werden als Inhalt interpretiert, auch Leerzeichen und Zeilenumbrüche. Wenn du keinen Standardtext willst, schreibe <textarea></textarea> ohne Inhalt dazwischen.

Browser-Kompatibilität

Das textarea-Element wird von allen Browsern vollständig unterstützt. Alle Attribute wie placeholder, maxlength und required funktionieren zuverlässig.

Email-Kompatibilität

Das textarea-Element wird in E-Mail-Clients nicht unterstützt. Interaktive Formularelemente werden aus Sicherheitsgründen entfernt.

Verwandte Elemente