<textarea>

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.

Steckbrief <textarea>

Kategorie: Formulare
Art: Interaktiv
Attribute: 11
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 03.02.2026

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

index.html

Grundsyntax

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

Attribute

11 Attribute

Attribut und Beispiel	Beschreibung
`name` String name="nachricht"	Name des Feldes, wird beim Formular-Versand verwendet
`rows` Number rows="5"	Anzahl der sichtbaren Textzeilen
`cols` Number cols="40"	Anzahl der sichtbaren Zeichen pro Zeile
`placeholder` String placeholder="Deine Nachricht..."	Platzhaltertext, der angezeigt wird wenn das Feld leer ist
`maxlength` Number maxlength="500"	Maximale Anzahl erlaubter Zeichen
`minlength` Number minlength="10"	Minimale Anzahl erforderlicher Zeichen
`required` Boolean required	Macht das Feld zu einem Pflichtfeld
`readonly` Boolean readonly	Verhindert Änderungen, Wert wird trotzdem versendet
`disabled` Boolean disabled	Deaktiviert das Feld komplett, Wert wird nicht versendet
`wrap` String wrap="hard"	Steuert Zeilenumbrüche beim Versenden: 'soft' (Standard) oder 'hard'
`form` String form="meinformular"	ID des zugehörigen Formulars (wenn außerhalb des form-Elements)

Beispiele

3 Beispiele

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

index.html

Kommentarfeld

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

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.

index.html

Textfeld mit Limit

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

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

index.html

Readonly-Feld

<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

4 Fehler

01 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.

02 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.

03 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>.

04 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

5 von 5

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

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Keine

Entfernt Formularelemente aus Sicherheitsgründen.
Gmail

Keine

Gmail entfernt textarea-Elemente komplett aus dem HTML.
Outlook

Keine

Outlook entfernt Formularelemente vollständig.
Thunderbird

Keine

Formularelemente werden nicht unterstützt.
Yahoo Mail

Keine

Yahoo Mail entfernt Formular-Elemente aus dem HTML.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

<textarea>

Grundlagen

Syntax

Attribute

Beispiele

Barrierefreiheit

Häufige Fehler

Browser-Kompatibilität

Email-Kompatibilität

Newsletter