HTML/Tutorials/Formulare/textarea

Text-Info

20min

einfach

Kenntnisse in
● HTML-Formulare
● CSS

Ein textarea-Element ist ein mehrzeiliges Eingabefeld (textarea = Textbereich). Es dient z. B. der Eingabe von mehrzeiligen Texten, etwa Kommentaren, Forumsbeiträgen oder Benachrichtigungen.

Folgende Attribute sind möglich:

• name: Für die weitere serverseitige Verarbeitung benötigen auch die Textareas ein name-Attribut.
  Hauptartikel: HTML/Tutorials/Formulare/Was ist ein Webformular?
• rows bestimmt die Anzahl der angezeigten Zeilen (rows = Zeilen) und damit die Höhe
• cols: bestimmt die Anzahl der angezeigten Spalten (cols = columns = Spalten)
  „Spalten“ bedeutet dabei die Anzahl der Zeichen pro Zeile.
• wrap-Attribut legt fest, ob Text umgebrochen werden soll. Mögliche Werte sind:
  • hard:
  • soft: Bei einem harten Zeilenumbruch werden durch den Browser Zeilenumbrüche generiert, sodass keine Zeile mehr Zeichen hat, als durch das cols-Attribut vorgegeben. Sollten Sie also wrap = "hard" verwenden, ist cols ein Pflichtattribut.

Beachten Sie: Die Attribute rows und cols bestimmen lediglich die Anzeigegröße des Eingabebereichs, nicht die Länge des erlaubten Textes. Diese ist theoretisch unbegrenzt. Web-Browser statten die mehrzeiligen Eingabefelder bei der Anzeige üblicherweise mit Scrollbalken aus, sodass der Anwender bei längeren Eingaben scrollen kann.

Beispiel ansehen …

<h2>Ganz spontan</h2>
<p>Welche HTML-Elemente fallen Ihnen ein, was bewirken sie?<p>
<textarea></textarea>

Das textarea-Element kann über die rechte untere Ecke in seiner Größe verändert werden.
Sie können seine Größe aber auch über Attribute oder über CSS festlegen.

Anwendungsbeispiele

Textvorbelegung bei mehrzeiligen Eingabebereichen

Sie können ein mehrzeiliges Eingabefeld mit Inhalt vorbelegen. Im Gegensatz zu den einzeiligen Eingabefeldern hat <textarea> kein value-Attribut. Um mehrzeilige Eingabefelder mit Text vorzubelegen, notieren Sie den gewünschten Text einfach als Elementinhalt zwischen den Tags <textarea> und </textarea>. Leerzeichen und Zeilenumbrüche im Quelltext werden als solche dargestellt.

Beispiel ansehen …

<h1>Schreiben Sie eine Geschichte</h1>
<p>Hier der Anfang der Geschichte:</p>
<textarea cols="50" rows="10">Es war dunkel, feucht und neblig …</textarea>

Die textarea wird mit einem Text vorbelegt, der ergänzt, aber auch geändert werden kann.
Um den Besucher zur Texteingabe zu ermuntern, ist das Textfeld mit cols="50" 50 Zeichen breit und rows="10" 10 Zeilen hoch.

Gestaltung mit CSS

Sie können mehrzeilige Eingabefelder aber auch wie jedes andere Element mit CSS gestalten:

Beispiel ansehen …

<textarea>Es war dunkel, feucht und neblig …</textarea>

Das Beispiel entspricht im Wesentlichen dem oberen Beispiel. Es erhält aber keine Attribute mehr, sondern wird über CSS gestaltet.

textarea {
	caret-color: red;  
	width: 60em;
	height: 15em;
	border: 1px solid #cccccc;
	padding: 0.5em;
	font-family: Tahoma, sans-serif;
}
textarea:focus {
      background: #FFC;
}

Die Textarea erhält nun eine Breite und Höhe über eine CSS-Festlegung im style-Element. Neben einem Rand und einem Innenabstand zur Verschönerung wird die Farbe des Textcursors, der beim Aktivieren des Eingabefelds aufleuchtet, mit caret-color rot gefärbt.

Beachten Sie, dass innerhalb von <textarea> keine weiteren HTML-Elemente erlaubt sind.
Sämtliche Zeichen, die in HTML eine Sonderbedeutung haben, wie <, > und &, müssen zwingend als Entity <, > und & geschrieben werden (siehe HTML/Tutorials/Code in HTML darstellen). Ebenso ist eine Formatierung einzelner Bereiche des Textes nicht möglich.

Eingabefelder und Eingabebereiche auf "nur lesen" setzen

Sie können erzwingen, dass der Inhalt eines Eingabefeldes nicht geändert werden kann, wenn Sie Felder mit einem Wert vorbelegen möchten, den der Anwender aber nicht ändern können soll oder eine bereits geprüfte Eingabe nicht mehr geändert werden darf.

Beispiel ansehen …

<h1>Kein Rabatt und keine Gnade</h1>
<form>
  <label>Preis: <input name="preis" type="text" size="8" value="€ 699.-" readonly></label>
  <p>Lizenzvereinbarung:</p>
  <textarea name="lizenz" cols="50" rows="10" readonly>Mit dem Absenden dieses Formulars erklären Sie sich mit folgenden Vereinbarungen einverstanden:
Sie erhalten …</textarea>
  </form>

Mit dem Attribut readonly können Sie ein einzeiliges Eingabefeld oder einen mehrzeiligen Eingabebereich vor Veränderungen schützen.

Siehe auch

• contenteditable-Universalattribut, mit dem Sie einen eingeschränkt funktionierenden WYSIWYG-Editor nachbauen können.
• JavaScript/Tutorials/Formulare/WYSIWYG-Editor mit einem textarea-Element als Basis

Referenz

Formular-Elemente

• textarea

Formular-Attribute

• autocomplete
• autofocus
• disabled
• form
• inputmode

• name
• placeholder
• readonly
• required
• size
• value
• wrap