CSS, HTML und Javascript mit {stil}

HTML-Tag textarea • Textbereich in einem Formular

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

HTML textarea erzeugt ein Eingabefeld für 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 – eintragen kann.


<form action="textarea.html" 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 von Eingabefeldern ist für die weiterverarbeitende Anwendung gedacht. Eine Anwendung auf dem Server identifiziert das Eingabefeld ü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: 3rem".

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

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.

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
Art der Trennung beim Übermitteln der Daten
<textarea> </textarea>