<textarea>: Das Textarea-Element

<label for="story">Tell us your story:</label>

<textarea id="story" 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 #ccc;
  box-shadow: 1px 1px 1px #999;
}

label {
  display: block;
  margin-bottom: 10px;
}

Das obige Beispiel zeigt mehrere Merkmale von <textarea>:

• Ein id-Attribut, um das <textarea> mit einem <label>-Element für Barrierefreiheitszwecke zu verknüpfen
• Ein name-Attribut, um den Namen des assoziierten Datenelements festzulegen, das beim Abschicken des Formulars an den Server übermittelt wird.
• rows- und cols-Attribute, um genau die Größe des <textarea> festzulegen. Diese zu setzen ist eine gute Idee für Konsistenz, da die Standardeinstellungen der Browser unterschiedlich sein können.
• Das <textarea>-Element spezifiziert seinen Inhalt unterschiedlich im HTML- und JavaScript-Kontext:
  • Im HTML wird der initiale Inhalt eines <textarea> zwischen seinen öffnenden und schließenden Tags angegeben, nicht als value-Attribut.
  • In JavaScript haben <textarea>-Elemente eine value-Eigenschaft, die verwendet werden kann, um den aktuellen Inhalt zu bekommen oder festzulegen, und defaultValue, um seinen anfänglichen Wert zu bekommen oder festzulegen (entspricht dem Zugriff auf den Textinhalt des HTML-Elements).

Das <textarea>-Element akzeptiert auch mehrere Attribute, die gemeinsam mit Formular-<input>s verwendet werden, wie autocapitalize, autocomplete, autofocus, disabled, placeholder, readonly und required.

Dieses Element umfasst die globalen Attribute.

autocapitalize

Steuert, ob eingegebener 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 explizit einen Wert in dieses Feld bei jeder Nutzung eingeben, oder das Dokument bietet eine eigene Autovervollständigungs-Methode; der Browser vervollständigt die Eingabe nicht automatisch.
• on: Der Browser kann den Wert basierend auf früher durch den Benutzer eingegebene Werte automatisch vervollständigen.
• <token-list>: Eine geordnete Menge aus Leerzeichen-getrennten Autovervollständigungs-Detail-Tokens, optional vorangestellt durch ein Sektions-Token, ein Abrechnungs- oder Versand-Gruppentoken und/oder ein Token, das den Typ des Empfängers identifiziert.

<textarea>-Elemente, die das autocomplete-Attribut nicht angeben, erben den autocomplete-on- oder off-Status, der beim form-Besitzer des <textarea> festgelegt ist. Der form-Besitzer ist entweder das <form>-Element, von dem dieses <textarea>-Element ein Nachkomme ist, oder das form-Element, dessen id durch das form-Attribut des Eingabeelements angegeben ist. Sehen Sie für weitere Informationen das autocomplete-Attribut in <form>.

autocorrect

Steuert, ob automatische Rechtschreibkorrektur und Textverarbeitung aktiviert sind, während der Benutzer dieses textarea bearbeitet. Erlaubte Werte sind:

on

Aktiviert automatische Rechtschreibkorrektur und Textersetzungen.

off

Deaktiviert automatische Rechtschreibkorrektur und Textersetzungen.

autofocus

Dieses Boolean-Attribut ermöglicht es Ihnen zu spezifizieren, dass ein Form-Control beim Laden der Seite den Eingabefokus haben soll. Nur ein formularbezogenes Element in einem Dokument kann dieses Attribut angegeben haben.

cols

Die sichtbare Breite des Textsteuerungselements in durchschnittlichen Zeichenbreiten. Wenn es spezifiziert ist, muss es eine positive Ganzzahl sein. Wenn es nicht spezifiziert ist, ist der Standardwert 20.

dirname

Dieses Attribut wird verwendet, um die Textrichtung des Inhalts des Elements anzuzeigen. Für weitere Informationen siehe das dirname-Attribut.

disabled

Dieses Boolean-Attribut gibt an, dass der Benutzer nicht mit dem Kontrollkästchen interagieren kann. Wenn dieses Attribut nicht spezifiziert ist, erbt das Kontrollkästchen seine Einstellung vom enthaltenen Element, z. B. <fieldset>; wenn kein enthaltenes Element vorhanden ist, wenn das Attribut disabled festgelegt wird, ist das Kontrollkästchen aktiviert.

form

Das <textarea>-Element, mit dem das <textarea>-Element verbunden ist (sein "form owner"). Der Wert des Attributs muss die id eines Form-Elements im selben Dokument sein. Wenn dieses Attribut nicht angegeben ist, muss das <textarea>-Element ein Nachkomme eines Form-Elements sein. Dieses Attribut ermöglicht es, <textarea>-Elemente an beliebiger Stelle innerhalb eines Dokuments zu platzieren, nicht nur als Nachkommen von Form-Elementen.

maxlength

Die maximale Zeichenlänge (gemessen in UTF-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 in UTF-16 Codeeinheiten), die der Benutzer eingeben sollte.

name

Der Name des Kontrollfelds.

placeholder

Ein Hinweis für den Benutzer, was in das Kontrollkästchen eingegeben werden kann. Wagenrückläufe oder Zeilenvorschübe innerhalb des Placeholder-Texts müssen beim Rendern des Hinweises als Zeilenumbrüche 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 sind kein Ersatz für ein ordentliches <label>-Element, das an die Eingabe gebunden ist. Siehe <input> labels für eine vollständige Erklärung.

readonly

Dieses Boolean-Attribut weist darauf hin, dass der Benutzer den Wert des Steuerfelds nicht ändern kann. Im Gegensatz zum disabled-Attribut verhindert das readonly-Attribut nicht, dass der Benutzer im Steuerfeld klickt oder auswählt. Der Wert eines schreibgeschützten Kontrollfelds wird dennoch mit dem Formular gesendet.

required

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

rows

Die Anzahl der sichtbaren Textzeilen für das Steuerfeld. Wenn dieser Wert angegeben ist, muss es eine positive Ganzzahl sein. Wenn nicht, beträgt der Standardwert 2.

spellcheck

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

• true: Gibt an, dass das Element auf Rechtschreib- und Grammatikfehler überprüft werden muss.
• default : Gibt an, dass das Element entsprechend eines Standardverhaltens handeln soll, möglicherweise basierend auf dem eigenen spellcheck-Wert des Elternelements.
• false : Gibt an, dass das Element nicht auf Rechtschreibfehler überprüft werden soll.

wrap

Gibt an, wie das Steuerfeld den Wert für das Formular festlegen 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 Steuerfelds ist; das cols-Attribut muss dazu angegeben sein
• soft: Der Browser stellt sicher, dass alle Zeilenumbrüche im eingegebenen Wert ein CR+LF-Paar sind, aber es werden keine zusätzlichen Zeilenumbrüche dem Wert hinzugefügt.
• off Nicht standardisiert : Wie soft, aber ändert das Erscheinungsbild zu white-space: pre, sodass Zeilenabschnitte, die cols überschreiten, nicht umbrochen werden und das <textarea> horizontal scrollbar wird.

Wenn dieses Attribut nicht angegeben ist, ist soft der Standardwert.

<textarea> ist ein Ersatz-Element — es hat intrinsische Abmessungen, wie ein Rasterbild. Standardmäßig ist der display-Wert inline-block. Im Vergleich zu anderen Form-Elementen ist es relativ einfach zu stylen, mit seinem Box-Modell, Schriftarten, Farbschema usw., die leicht mit regulärem CSS manipulierbar sind.

Styling HTML forms bietet einige nützliche Tipps zum Styling von <textarea>s.

Die HTML-Spezifikation definiert nicht, wo die Basislinie eines <textarea> ist, daher setzen verschiedene Browser sie an unterschiedlichen Positionen. Bei Gecko ist die <textarea>-Basislinie auf die Basislinie der ersten Zeile des Textareas gesetzt, bei einem anderen Browser könnte sie am unteren Rand des <textarea>-Rahmens gesetzt sein. Verwenden Sie nicht vertical-align: baseline darauf; das Verhalten ist unvorhersehbar.

In den meisten Browsern sind <textarea>s skalierbar — Sie werden den Ziehgriff in der rechten Ecke bemerken, der verwendet werden kann, um die Größe des Elements auf der Seite zu ändern. Dies wird durch die resize CSS-Eigenschaft gesteuert — Größenänderungen sind standardmäßig aktiviert, aber Sie können sie explizit deaktivieren, indem Sie einen resize-Wert von none verwenden:

textarea {
  resize: none;
}

Gültige und ungültige Werte eines <textarea>-Elements (z. B. solche innerhalb und außerhalb der durch minlength, maxlength oder required festgelegten Grenzen) können mit den :valid und :invalid Pseudoklassen hervorgehoben werden. Zum Beispiel, um Ihrem textarea je nach Validität einen anderen Rand zu geben:

textarea:invalid {
  border: 2px dashed red;
}

textarea:valid {
  border: 2px solid lime;
}

Das folgende Beispiel zeigt eine Textarea mit einer festgelegten Anzahl von Zeilen und Spalten, einigen Standardinhalten 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

Dieses Beispiel hat eine minimale und maximale Anzahl von Zeichen - jeweils 10 und 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, dass minlength den Benutzer nicht daran hindert, Zeichen zu entfernen, sodass die eingegebene Menge unter das Minimum geht, aber es macht den in das <textarea> eingegebenen Wert ungültig. Beachten Sie auch, dass auch wenn Sie einen minlength-Wert (beispielsweise 3) eingestellt haben, eine leere <textarea> immer noch als gültig angesehen wird, es sei denn, Sie haben ebenfalls das required-Attribut eingestellt.

Dieses Beispiel hat einen festgelegten Platzhalter. 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

Dieses Beispiel zeigt zwei <textarea>s — eines ist readonly und eines ist disabled. Sie können den Inhalt keines der Elemente bearbeiten, aber das readonly-Element ist fokussierbar und sein Wert wird in Formularen übermittelt. Der Wert des disabled-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

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