Das<textarea>HTML Element repräsentiert ein mehrzeiliges Plain-Text-Bearbeitungsfeld, das nützlich ist, wenn Benutzer eine größere Menge an freiem Text eingeben sollen, zum Beispiel einen Kommentar in einem Bewertungs- oder Feedback-Formular.

Probieren Sie es aus

<label for="story">Tell us your story:</label><textarea name="story" rows="5" cols="33">It was a dark and stormy night...</textarea>

label,textarea {  font-size: 0.8rem;  letter-spacing: 1px;}textarea {  padding: 10px;  max-width: 100%;  line-height: 1.5;  border-radius: 5px;  border: 1px solid #cccccc;  box-shadow: 1px 1px 1px #999999;}label {  display: block;  margin-bottom: 10px;}

Das obige Beispiel demonstriert eine Reihe von Merkmalen des<textarea>:

• Einid-Attribut, um das<textarea> mit einem<label>-Element für Barrierefreiheitszwecke zu verknüpfen.
• Einname-Attribut, um den Namen des zugehörigen Datenpunkts festzulegen, der beim Absenden des Formulars an den Server übermittelt wird.
• rows- undcols-Attribute, um eine genaue Größe für das<textarea> festzulegen. Es ist sinnvoll, diese zu setzen, um Konsistenz zu gewährleisten, da die Standardeinstellungen der Browser unterschiedlich sein können.
• Das<textarea>-Element spezifiziert seinen Inhalt in HTML- und JavaScript-Kontexten unterschiedlich:
  • In HTML wird der anfängliche Inhalt eines<textarea> zwischen seinen öffnenden und schließenden Tags angegeben, nicht alsvalue-Attribut.
  • In JavaScript haben<textarea>-Elemente einevalue-Eigenschaft, die verwendet werden kann, um den aktuellen Inhalt abzurufen oder zu setzen, unddefaultValue, um seinen Anfangswert zu erhalten oder zu setzen (entspricht dem Zugriff auf den Textinhalt des HTML-Elements).

Das<textarea>-Element akzeptiert außerdem mehrere Attribute, die normalerweise für Formular-<input>s gelten, wieautocapitalize,autocomplete,autofocus,disabled,placeholder,readonly undrequired.

Attribute

Dieses Element umfasst dieglobalen Attribute.

autocapitalize

Steuert, ob der eingegebene Text automatisch großgeschrieben wird und wenn ja, in welcher Weise.

autocomplete

Steuert, ob eingegebener Text automatisch vom Browser vervollständigt werden kann. Mögliche Werte sind:

• off: Der Benutzer muss bei jeder Verwendung explizit einen Wert in dieses Feld eingeben, oder das Dokument bietet seine eigene Vervollständigungsmethode; der Browser vervollständigt den Eintrag nicht automatisch.
• on: Der Browser kann den Wert basierend auf Werten, die der Benutzer bei früheren Verwendungen eingegeben hat, automatisch vervollständigen.
• <token-list>: Eine geordnete Menge von durch Leerzeichen getrennten Autofill-Detail-Token, optional vorangegangen von einem Sektions-Token, einem Zahlungs- oder Versand-Token und/oder einem Token, das den Typ des Empfängers identifiziert.

<textarea>-Elemente, die dasautocomplete-Attribut nicht spezifizieren, erben denautocomplete-Statuson oderoff, der im Formular des<textarea>-Formularbesitzers festgelegt ist. Der Formularbesitzer ist entweder das<form>-Element, dessen Nachfolger das<textarea>-Element ist, oder das Formularelement, dessenid durch dasform-Attribut des Eingabeelements angegeben wird. Weitere Informationen finden Sie imautocomplete-Attribut in<form>.

autocorrect

Steuert, ob die automatische Rechtschreibkorrektur und Textverarbeitung aktiviert ist, während der Benutzer diesestextarea bearbeitet. Zulässige Werte sind:

on

Aktiviert die automatische Rechtschreibkorrektur und Textsubstitutionen.

off

Deaktiviert die automatische Rechtschreibkorrektur und Textsubstitutionen.

autofocus

Dieses Boolesche Attribut ermöglicht es Ihnen, anzugeben, dass ein Formularelement beim Laden der Seite den Eingabefokus haben soll. Nur ein Element im Dokument kann dieses Attribut spezifiziert haben.

cols

Die sichtbare Breite der Texteingabe, in durchschnittlichen Zeichenbreiten. Wenn es angegeben ist, muss es eine positive ganze Zahl sein. Wenn es nicht angegeben ist, beträgt der Standardwert20.

dirname

Dieses Attribut wird verwendet, um die Textrichtung innerhalb des Elementinhalts anzugeben. Weitere Informationen finden Sie imdirname-Attribut.

disabled

Dieses Boolean-Attribut gibt an, dass der Benutzer nicht mit dem Steuerelement interagieren kann. Wenn dieses Attribut nicht spezifiziert ist, übernimmt das Steuerelement die Einstellungen des übergeordneten Elements, zum Beispiel<fieldset>; wenn es kein übergeordnetes Element gibt, wenn dasdisabled-Attribut gesetzt ist, wird das Steuerelement aktiviert.

form

Das Formularelement, dem das<textarea>-Element zugeordnet ist (sein "Formularbesitzer"). Der Wert des Attributs muss dieid eines Formularelements im gleichen Dokument sein. Wenn dieses Attribut nicht angegeben ist, muss das<textarea>-Element ein Nachfolger eines Formularelements sein. Dieses Attribut ermöglicht es Ihnen,<textarea>-Elemente überall in einem Dokument zu platzieren und nicht nur als Nachfolger von Formularelementen.

maxlength

Die maximale Zeichenlänge (gemessen inUTF-16-Codeeinheiten), die der Benutzer eingeben kann. Wenn dieser Wert nicht angegeben ist, kann der Benutzer eine unbegrenzte Anzahl von Zeichen eingeben.

minlength

Die minimale Zeichenlänge (gemessen inUTF-16-Codeeinheiten), die der Benutzer eingeben sollte.

name

Der Name des Steuerelements.

placeholder

Ein Hinweis an den Benutzer, was in das Steuerelement eingegeben werden kann. Wagenrückläufe oder Zeilenumbrüche innerhalb des Platzhaltertexts müssen als Zeilenumbrüche beim Rendern des Hinweises behandelt werden.

Hinweis:Platzhalter sollten nur verwendet werden, um ein Beispiel für die Art der Daten zu zeigen, die in ein Formular eingegeben werden sollten; sie sindkeine Ersatz für ein richtiges<label>-Element, das mit der Eingabe verbunden ist. Sehen Sie sich<input> labels für eine vollständige Erklärung an.

readonly

Dieses Boolean-Attribut zeigt an, dass der Benutzer den Wert des Steuerelements nicht ändern kann. Anders als dasdisabled-Attribut verhindert dasreadonly-Attribut nicht, dass der Benutzer im Steuerelement klickt oder auswählt. Der Wert eines schreibgeschützten Steuerelements wird dennoch mit dem Formular übermittelt.

required

Dieses Attribut gibt an, dass der Benutzer einen Wert eingeben muss, bevor ein Formular gesendet wird.

rows

Die Anzahl der sichtbaren Textzeilen für das Steuerelement. Wenn es angegeben ist, muss es eine positive ganze Zahl sein. Wenn es nicht angegeben ist, beträgt der Standardwert 2.

spellcheck

Gibt an, ob das<textarea> einer Rechtschreibprüfung durch den zugrunde liegenden Browser/OS unterzogen wird. Der Wert kann sein:

• true: Zeigt an, dass das Element auf Rechtschreibung und Grammatik überprüft werden muss.
• default: Zeigt an, dass das Element nach einem Standardverhalten handeln soll, das möglicherweise auf denspellcheck-Wert des übergeordneten Elements basiert.
• false: Zeigt an, dass das Element nicht auf Rechtschreibung überprüft werden sollte.

wrap

Gibt an, wie das Steuerelement den Wert für die Formularübermittlung umschließen soll. Mögliche Werte sind:

• hard: Der Browser fügt automatisch Zeilenumbrüche (CR+LF) ein, sodass jede Zeile nicht länger als die Breite des Steuerelements ist; dascols-Attribut muss angegeben werden, damit dies wirksam wird.
• soft: Der Browser stellt sicher, dass alle Zeilenumbrüche im eingegebenen Wert einCR+LF-Paar sind, aber keine zusätzlichen Zeilenumbrüche zum Wert hinzugefügt werden.
• offNicht standardisiert: Wiesoft, aber ändert das Erscheinungsbild inwhite-space: pre, sodass Zeilenabschnitte, diecols überschreiten, nicht umgebrochen werden und das<textarea> horizontal scrollbar wird.

Wenn dieses Attribut nicht angegeben ist, istsoft der Standardwert.

Styling mit CSS

<textarea> ist einersetzbares Element — es hat intrinsische Dimensionen, ähnlich wie ein Rasterbild. Standardmäßig ist seindisplay-Wertinline-block. Im Vergleich zu anderen Formularelementen ist es relativ einfach zu stylen, da sein Boxmodell, seine Schriftarten, Farbgebung usw. über reguläres CSS leicht manipulierbar sind.

Styling HTML-Formulare bietet einige nützliche Tipps zum Stylen von<textarea>s.

Baseline-Inkonsistenz

Die HTML-Spezifikation definiert nicht, wo die Grundlinie eines<textarea> ist, sodass verschiedene Browser sie an verschiedenen Positionen setzen. Für Gecko wird die<textarea>-Grundlinie auf der Grundlinie der ersten Zeile des Textbereichs gesetzt, in einem anderen Browser kann sie am unteren Rand des<textarea>-Rahmens gesetzt sein. Verwenden Sie nichtvertical-align: baseline dafür; das Verhalten ist unvorhersehbar.

Steuerung, ob ein Textbereich skalierbar ist

In den meisten Browsern sind<textarea>s skalierbar — Sie bemerken den Ziehgriff in der rechten unteren Ecke, der verwendet werden kann, um die Größe des Elements auf der Seite zu ändern. Dies wird von der CSS-Eigenschaftresize gesteuert — das Skalieren ist standardmäßig aktiviert, aber Sie können es explizit mit einemresize-Wert vonnone deaktivieren:

textarea {  resize: none;}

Styling von gültigen und ungültigen Werten

Gültige und ungültige Werte eines<textarea>-Elements (z.B. jene innerhalb und außerhalb der durchminlength,maxlength oderrequired festgelegten Grenzen) können mit den Pseudoklassen:valid und:invalid hervorgehoben werden. Zum Beispiel, um Ihrem Textbereich eine andere Umrandung zu geben, abhängig davon, ob er gültig oder ungültig ist:

textarea:invalid {  border: 2px dashed red;}textarea:valid {  border: 2px solid lime;}

Beispiele

Einfaches Beispiel

Das folgende Beispiel zeigt ein Textfeld mit einer festgelegten Anzahl von Zeilen und Spalten, einem Standardinhalt und CSS-Stilen, die verhindern, dass Benutzer das Element mehr als 500px breit und 130px hoch skalieren:

<textarea name="textarea" rows="5" cols="15">Write something here</textarea>

textarea {  max-height: 130px;  max-width: 500px;}

Ergebnis

Beispiel mit "minlength" und "maxlength"

Dieses Beispiel hat eine minimale und maximale Anzahl von Zeichen — von 10 bzw. 20. Probieren Sie es aus und sehen Sie.

<textarea name="textarea" rows="5" cols="30" minlength="10" maxlength="20">Write something here…</textarea>

textarea {  max-height: 130px;  max-width: 500px;}

Ergebnis

Beachten Sie, dassminlength den Benutzer nicht daran hindert, Zeichen zu entfernen, sodass die Anzahl der eingegebenen Zeichen unter das Minimum fällt, es macht jedoch den in das<textarea> eingegebenen Wert ungültig. Beachten Sie auch, dass ein leeres<textarea> trotz eingestelltemminlength-Wert (z. B. 3) als gültig betrachtet wird, es sei denn, Sie haben auch dasrequired-Attribut gesetzt.

Beispiel mit "Platzhalter"

Dieses Beispiel hat einen Platzhalter gesetzt. Beachten Sie, wie er verschwindet, wenn Sie beginnen, in das Feld zu tippen.

<textarea  name="textarea"  rows="5"  cols="30"  placeholder="Comment text."></textarea>

textarea {  max-height: 130px;  max-width: 500px;}

Ergebnis

Deaktivierte und nur lesbare Textbereiche

Dieses Beispiel zeigt zwei<textarea>s — eines istreadonly und eines istdisabled.Sie können den Inhalt keines der Elemente bearbeiten, aber dasreadonly-Element ist fokussierbar und sein Wert wird in Formularen übermittelt.Der Wert desdisabled-Elements wird nicht übermittelt und es ist nicht fokussierbar.

<textarea name="textarea" rows="5" cols="30" readonly>I am a read-only textarea.</textarea><textarea name="textarea" rows="5" cols="30" disabled>I am a disabled textarea.</textarea>

textarea {  display: block;  resize: horizontal;  max-width: 500px;}

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Andere Formular-bezogene Elemente:
  • <form>
  • <button>
  • <datalist>
  • <legend>
  • <label>
  • <select>
  • <optgroup>
  • <option>
  • <input>
  • <fieldset>
  • <output>
  • <progress>
  • <meter>