HTML-Tag textarea • Textbereich in einem Formular

Eingabefeld für lange Texte

Normalerweise wird in einem Formular ein leeres textarea-Element notiert, in das der Benutzer seine Daten – z.B. eine Bemerkung oder Anfrage – einträgt.

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

label identifiziert das Eingabefeld über das id-Attribut des textarea-Elements 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.

Wie funktionieren Formulare in Webseiten?

Text vorgeben

<textarea cols="35" rows="4"> 
   Dieses Eingabefeld hat eine Breite von 24 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.

Das placeholder-Attribut des textarea-Elements hilft dem Benutzer beim Ausfüllen.

<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 erlauben dem Benutzer, die Größe der textarea mit einem kleinen Dreieck unten rechts zu ändern. Kein Attribut des textarea-Elements 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

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

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

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

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 Mindestzahl von Zeichen eingegeben wurde, wenn das textarea-Feld den Fokus verliert.

Ein paar einfache CSS-Regeln verbessern aber auch Textareas:

<textarea 
   class="valid" id="valid" cols="70"  
   maxlength="80" rows="5" 
   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.

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.