HTML-Tag textarea • Textbereich in einem Formular

Eingabefeld für langen Text in Formularen: Textaera Zeigt einen Bleistift, der in ein Feld schreibt

textarea erzeugt ein Eingabefeld für beliebig lange Text in einem HTML-Formular. Textfelder sollen immer dann verwendet werden, wenn der Benutzer mehr als eine Zeile eingeben soll.

Wenn nur eine kurze Eingabe wie ein Namen oder eine Telefonnummer erwarten wird, sollte das input-Tag benutzt werden, das nur ein einzeiliges Eingabefeld erzeugt.

Normalerweise wird in einem Formular ein leeres textarea-Tag notiert, in das der Benutzer seine Daten – z.B. eine Bemerkung oder Anfrage – eintragen kann.

<form action="form.php" method="post"> 
   <div>  
      <label for="text">Anmerkung</label>
      <textarea id="text" name="text" cols="35" rows="4"></textarea> 	
      <input type="submit" value="Senden" />
   </div> 
</form> 

Das label-Tag identifiziert das Eingabefeld über das id-Attribut des textarea-Tags für Screenreader. Das name-Attribut des textarea-Felds wendet sich an die weiterverarbeitende Anwendung. Die Anwendung form.php auf dem Server identifiziert die Eingabefelder über das name-Attribut.

Text vorgeben

<textarea cols="35" rows="4"> 
   Dieses Eingabefeld hat eine Breite von 35 Zeichen 
   und ist vier Zeilen hoch.
</textarea> 

Anstelle von rows und cols passt CSS das Eingabefeld besser in das Design des Formulars, z.B.: style="width:300px; height: 4em". CSS style oder eine CSS-Klasse für textarea überschreiben die Attribute rows und cols.

Mit den HTML5-Attributen für Formularfelder kann der Text als placeholder-Attribut notiert werden.

<textarea name="text" id="text" placeholder="Mehr dazu schreiben">
</textarea>

Jeder Text und jeder HTML-Code, der zwischen das öffnende und schließende textarea-Tag gesetzt wird, wird dem Benutzer im Textfeld angezeigt, aber textarea-Felder können ihren Inhalt nur als flachen Text darstellen. Es ist nicht möglich, Text innerhalb von textarea durch Stile oder Tags hervorzuheben. Erst ein Overlay – z.B. durch ein div-Tag – verwandelt eine textarea in einen Editor mit Formatierungen (z.B. die Editoren in Content Management Systemen wie TinyMCE oder CKEditor).

CSS für textarea: Scrollbalken

Die meisten Browser (aber nicht Microsoft IE und Edge) erlauben dem Benutzer, die Größe der textarea mit einem kleinen Dreieck unten rechts zu ändern. Kein Attribut des textarea-Tags kann diese Option verhindern, wohl aber CSS:

textarea { 
    resize: none;
    overflow: auto;
}

Scrollleiste in IE: Sowohl IE11 (und Vorgänger) stellen Textfelder grundsätzlich mit einer Scrollleiste am rechten Rand dar, während Browser wie Firefox und Safari dem Textfeld nur dann eine Scrollleiste geben, wenn die Textmenge den Einsatz einer Scrollleiste erfordert.

CSS textarea { overflow: auto } verhindert die Scrollleiste in Internet Explorer.

Mit wenigen Zeilen CSS kommt das Textfeld dem Benutzer besser entgegen: eine größere Schrift, Schriftfarbe und padding gegen den Rand des Textbereichs.

background-color oder Hintergrundbilder mit CSS background-image für die textarea funktioniert – auch in Microsoft Edge.

textarea {
   background-image:linear-gradient(
      hsl(190,10%,98%), hsl(190,10%,94%)
   ); 
   padding:1ex;
   font-size:1em;
   box-sizing:border-box;
   color:navy;
}

Attribute für textarea

autofocus (neu in HTML5)
Feld bekommt den Fokus, wenn die Seite geladen wurde
cols
Anzahl der Zeichen, die über die Breite des Textfensters zu sehen sind.
disabled
boolescher Wert, der das Textfeld außer Kraft setzt. In einigen Browsern wird das Feld ausgegraut dargestellt.
form (neu in HTML5)
Ein oder mehrere Formulare, zu denen das input-Element gehört
maxlength
max. Zahl von Zeichen, die der Benutzer in das Textfeld eingeben kann. Die Einschränkung muss dennoch von der Anwendung auf dem Server geprüft werden (z.B. mit PHP substr()).
name
Kennzeichnung des Feldes für die verarbeitende Anwendung. Der Wert des name-Attributs muss eindeutig sein und darf nicht nochmals im Dokument verwendet werden.
placeholder (neu in HTML5)
Hinweis, was der Benutzer in das Eingabefeld eintragen soll
readonly
spielt einen Text oder einen Wert in das Feld ein, der vom Benutzer nicht verändert werden kann.
required (neu in HTML5)
Das Eingabefeld muss ausgefüllt werden
rows
Anzahl der Zeilen im Textfeld
wrap soft | hard
Soft: Art der Trennung beim Übermitteln der Daten: Der Text wird beim Senden des Formulars nicht umgebrochen (Default).
Hard: Der Text wird beim Senden umgebrochen und enthält Newlines. Das cols-Attribut muss gesetzt sein.

Eingaben validieren

Meist gibt es in einer Textarea keinen Grund für eine Validierung, denn Textareas sind Freiformtext. Ein Javascript kann prüfen, ob eine Mindeszahl von Zeichen eingegeben wurde, wenn das textarea-Feld den Fokus verliert.

Ein paar einfache CSS-Regeln verbessern aber auch Textareas:

HTML
<textarea 
   class="valid" id="valid" cols="70"  
   maxlength="80" rows="8" 
   required></textarea>
<input type="submit">

Das required-Attribut macht eine Eingabe erforderlich. maxlength begrenzt die Anzahl der eingegebenen Zeichen, damit z.B. ein Kommentarfeld von Spammern nicht übermäßig zugemüllt wird.

CSS
textarea.valid:invalid {border: 1px solid red}
textarea.valid:invalid~input[type="submit"] { display:none}

Der Submit-Button wird erst angezeigt, wenn Text in die Textarea gesetzt wird.

<textarea> </textarea>