<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 demonstriert einige Funktionen 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 zugehörigen Datenpunkts festzulegen, der beim Absenden des Formulars an den Server übermittelt wird.
• rows- und cols-Attribute, um eine genaue Größe für das <textarea> anzugeben. Das Setzen dieser Attribute ist für die Konsistenz eine gute Idee, da die Standardwerte 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 Öffnungs- und Schlusstags angegeben, nicht als value-Attribut.
  • In JavaScript haben <textarea>-Elemente eine value-Eigenschaft, die verwendet werden kann, um den aktuellen Inhalt zu erhalten oder zu setzen, und defaultValue, um seinen ursprünglichen Wert zu erhalten und zu setzen (entspricht dem Zugriff auf den Textinhalt des HTML-Elements).

Das <textarea>-Element akzeptiert auch mehrere Attribute, die für Formular-<input>s üblich sind, wie autocapitalize, autocomplete, autofocus, disabled, placeholder, readonly und required.

Dieses Element enthält die globalen Attribute.

autocapitalize

Steuert, ob eingegebener Text automatisch großgeschrieben wird und wenn ja, auf welche Weise.

autocomplete

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

• off: Der Benutzer muss explizit einen Wert in dieses Feld eingeben, oder das Dokument stellt seine eigene Auto-Vervollständigungsmethode bereit; der Browser vervollständigt den Eintrag nicht automatisch.
• on: Der Browser kann den Wert basierend auf Werten, die der Benutzer bei vorherigen Verwendungen eingegeben hat, automatisch vervollständigen.
• <token-list>: Eine geordnete Menge von durch Leerzeichen getrennten Auto-Vervollständigungsdetail-Token, optional eingeleitet durch ein Abschnitts-Token, ein Rechnungs- oder Versandgruppen-Token und/oder ein Token, das den Empfängertyp identifiziert.

<textarea>-Elemente, die das autocomplete-Attribut nicht spezifizieren, erben den autocomplete-Status on oder off, der auf den <textarea>'s Formularbesitzer festgelegt wurde. Der Formularbesitzer ist entweder das <form>-Element, von dem dieses <textarea>-Element ein Nachkomme ist, oder das Formular-Element, dessen id durch das form-Attribut des Eingabeelements angegeben ist. Für weitere Informationen siehe das autocomplete-Attribut in <form>.

autocorrect

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

on

Aktiviert automatische Rechtschreibkorrektur und Textsubstitutionen.

off

Deaktiviert automatische Rechtschreibkorrektur und Textsubstitutionen.

autofocus

Dieses boolesche Attribut ermöglicht es Ihnen, festzulegen, dass ein Formularelement den Eingabefokus haben soll, wenn die Seite geladen wird. Nur ein formularbezogenes Element in einem Dokument kann dieses Attribut haben.

cols

Die sichtbare Breite der Textsteuerung, angegeben in durchschnittlichen Zeichenbreiten. Wenn es angegeben ist, muss es eine positive Ganzzahl sein. Wenn es nicht angegeben ist, beträgt der Standardwert 20.

dirname

Dieses Attribut gibt die Textausrichtung der Elementinhalte an. Für weitere Informationen siehe das dirname-Attribut.

disabled

Dieses boolesche Attribut gibt an, dass der Benutzer nicht mit der Steuerung interagieren kann. Wenn dieses Attribut nicht angegeben ist, erbt die Steuerung ihre Einstellung von dem umschließenden Element, zum Beispiel <fieldset>; gibt es kein umschließendes Element, wenn das disabled-Attribut gesetzt ist, ist die Steuerung aktiviert.

form

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

maxlength

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

name

Der Name der Steuerung.

placeholder

Ein Hinweis für den Benutzer, was in die Steuerung eingegeben werden kann. Wagenrückläufe oder Zeilenumbrüche innerhalb des Placeholder-Textes müssen bei der Anzeige des Hinweises als Zeilenumbrüche behandelt werden.

Hinweis: Platzhalter sollten nur verwendet werden, um ein Beispiel für die Art der Daten anzuzeigen, die in ein Formular eingegeben werden sollen; sie sind kein Ersatz für ein richtiges <label>-Element, das mit der Eingabe verbunden ist. Siehe <input>-Labels für eine vollständige Erklärung.

readonly

Dieses boolesche Attribut gibt an, dass der Benutzer den Wert der Steuerung nicht ändern kann. Im Gegensatz zum disabled-Attribut verhindert das readonly-Attribut nicht, dass der Benutzer in die Steuerung klickt oder sie auswählt. Der Wert einer schreibgeschützten Steuerung wird weiterhin mit dem Formular übermittelt.

required

Dieses Attribut gibt an, dass der Benutzer einen Wert ausfüllen muss, bevor er ein Formular absendet.

rows

Die Anzahl der sichtbaren Textzeilen für die Steuerung. Wenn es angegeben ist, muss es eine positive Ganzzahl 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/das Betriebssystem unterzogen wird. Der Wert kann sein:

• true: Gibt an, dass das Element auf Rechtschreibung und Grammatik geprüft werden muss.
• default : Gibt an, dass das Element gemäß einem Standardverhalten agieren soll, möglicherweise basierend auf dem eigenen spellcheck-Wert des Elternelements.
• false : Gibt an, dass das Element nicht auf Rechtschreibung geprüft werden soll.

wrap

Zeigt an, wie die Steuerung den Wert zur Formularübermittlung umbricht. Mögliche Werte sind:

• hard: Der Browser fügt automatisch Zeilenumbrüche (CR+LF) ein, sodass jede Zeile nicht länger als die Breite der Steuerung ist; das cols-Attribut muss für diese Wirkung angegeben werden.
• soft: Der Browser stellt sicher, dass alle Zeilenumbrüche im eingegebenen Wert ein CR+LF-Paar sind, es werden jedoch keine zusätzlichen Zeilenumbrüche zum Wert hinzugefügt.
• off Nicht standardisiert : Wie soft, aber ändert das Erscheinungsbild in 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 ersetztes Element — es hat intrinsische Abmessungen, wie ein Rasterbild. Standardmäßig ist der display-Wert inline-block. Im Vergleich zu anderen Formularelementen ist es relativ einfach zu gestalten, da sein Box-Modell, seine Schriftarten, sein Farbschema usw. leicht mit regulärem CSS manipulierbar sind.

Styling von HTML-Formularen bietet einige nützliche Tipps zur Gestaltung von <textarea>s.

Die HTML-Spezifikation definiert nicht, wo die Grundlinie eines <textarea> ist, daher setzen verschiedene Browser sie an unterschiedliche Positionen. Bei Gecko wird die Grundlinie des <textarea> auf die Grundlinie der ersten Zeile des Textbereichs gesetzt, bei einem anderen Browser kann sie unten am <textarea>-Rahmen gesetzt sein. Verwenden Sie nicht vertical-align: baseline darauf; das Verhalten ist unvorhersehbar.

In den meisten Browsern sind <textarea>s skalierbar — Sie bemerken den Ziehgriff in der rechten unteren Ecke, mit dem die Größe des Elements auf der Seite verändert werden kann. Dies wird durch die resize CSS-Eigenschaft gesteuert — die Skalierung ist standardmäßig aktiviert, Sie können sie jedoch explizit mit einem resize-Wert von none deaktivieren:

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 gesetzten Grenzen) können mithilfe der :valid- und :invalid-Pseudoklassen hervorgehoben werden. Zum Beispiel, um Ihrem Textbereich eine andere Grenze zu geben, je nachdem, ob es gültig oder ungültig ist:

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

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

Das folgende Beispiel zeigt ein Textbereich mit einer festgelegten Anzahl von Zeilen und Spalten, einigen voreingestellten Inhalten und CSS-Stilen, die verhindern, dass Benutzer die Größe des Elements über 500px Breite und 130px Höhe hinaus ändern:

<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 - 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, dass minlength den Benutzer nicht daran hindert, Zeichen zu entfernen, sodass die Anzahl unter das Minimum fällt, aber es macht den in das <textarea> eingegebenen Wert ungültig. Beachten Sie auch, dass ein leeres <textarea> immer noch als gültig betrachtet wird, es sei denn, Sie haben auch das required-Attribut gesetzt.

Dieses Beispiel hat einen Placeholder gesetzt. Beachten Sie, wie es verschwindet, wenn Sie anfangen 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 beider Elemente nicht 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>