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"></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?

Veraltet: rows und cols sind ungenau

Die Attribute rows und cols stammen noch aus der Zeit vor CSS.

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

Wird die Textgröße des Felds geändert, würden sich auch Breite und Höhe der textarea ändern. 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.

textarea und placeholder

Das placeholder-Attribut des textarea-Elements hilft dem Benutzer beim Ausfüllen. Der Text verschwindet, sobald der Benutzer etwas in das Textfeld schreibt.

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

Wenn Abschnitte in einem Eingabefeld durch Farben, fette oder kursiv Schrift hervorgehoben werden sollen, wäre ein Element mit contenteditable="true" eine Alternative: beliebige HTML-Elemente als eigener Editor mit Farben, fetter und kursiver Schrift.

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 (resize: none)

Am Rande: Lange Zeit hatten nur textarea-Elemente ein resize-Feld, mit dem der Benutzer die Größe des Eingabefeldes bestimmen kann. CSS resize erlaubt dem Benutzer heute das Vergrößern und Verkleinern beliebiger Blöcke.

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

Scrollleiste in IE: Sowohl IE11 (und Vorgänger) stellten 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.

textarea { 
    resize: none;
    overflow: auto;
}

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. Sowohl rows- als auch cols-Attribut gelten als veraltet und sollten besser durch CSS ersetzt werden (ist flexibler).

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.