<textarea>: Das Textarea-Element
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
* Some parts of this feature may have varying levels of support.
Das <textarea>
HTML-Element repräsentiert ein mehrzeiliges Klartext-Bearbeitungsfeld, das nützlich ist, wenn Sie Benutzern erlauben möchten, eine größere Menge an freiem Text einzugeben, zum Beispiel einen Kommentar in einem Bewertungs- oder Feedback-Formular.
Probieren Sie es aus
<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 eine Reihe von 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 an den Server gesendet wird, wenn das Formular abgeschickt wird. rows
- undcols
-Attribute, um eine genaue Größe für das<textarea>
festzulegen. Diese Einstellung ist aus Gründen der Konsistenz eine gute Idee, da die Standardeinstellungen der Browser variieren können.- Das
<textarea>
-Element spezifiziert seinen Inhalt unterschiedlich in HTML- und JavaScript-Kontexten:- 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 zu erhalten oder zu setzen, unddefaultValue
, um dessen Anfangswert zu erhalten und zu setzen (entspricht dem Zugriff auf den Textinhalt des HTML-Elements).
- In HTML wird der anfängliche Inhalt eines
Das <textarea>
-Element akzeptiert auch mehrere Attribute, die allgemein für Formular-<input>
-Elemente gelten, wie autocapitalize
, autocomplete
, autofocus
, disabled
, placeholder
, readonly
und required
.
Attribute
Dieses Element enthält die globalen Attribute.
autocapitalize
-
Steuert, ob eingegebener Text automatisch großgeschrieben wird und, falls ja, auf welche Weise.
autocomplete
-
Steuert, ob eingegebener Text vom Browser automatisch vervollständigt werden kann. Mögliche Werte sind:
off
: Der Benutzer muss für jede Verwendung explizit einen Wert in dieses Feld eingeben, oder das Dokument stellt seine eigene Auto-Vervollständigungs-Methode zur Verfügung; 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 vorangestellt von einem Abschnitts-Token, einem Rechnungs- oder Versandgruppierungs-Token und/oder einem Token, das den Typ des Empfängers identifiziert.
<textarea>
-Elemente, die dasautocomplete
-Attribut nicht angeben, erben denautocomplete
-on
- oderoff
-Status, der am Formularbesitzer des<textarea>
festgelegt wurde. Der Formularbesitzer ist entweder das<form>
-Element, dem dieses<textarea>
-Element untergeordnet ist, oder das Formularelement, dessenid
durch dasform
-Attribut des Eingabeelements angegeben ist. Weitere Informationen finden Sie imautocomplete
-Attribut in<form>
. autocorrect
-
Steuert, ob die automatische Rechtschreibkorrektur und Verarbeitung von Text aktiviert ist, während der Benutzer dieses
textarea
bearbeitet. Erlaubte Werte sind: autofocus
-
Dieses boolesche Attribut lässt Sie angeben, dass ein Formularelement beim Laden der Seite den Eingabefokus haben soll. Nur ein form-assoziiertes Element in einem Dokument kann dieses Attribut angegeben haben.
cols
-
Die sichtbare Breite der Textsteuerung in durchschnittlichen Zeichenbreiten. Wenn es angegeben ist, muss es eine positive ganze Zahl sein. Wenn es nicht angegeben ist, beträgt der Standardwert
20
. dirname
-
Dieses Attribut wird verwendet, um die Textausrichtung der Elementinhalte anzuzeigen. Weitere Informationen finden Sie im
dirname
-Attribut. disabled
-
Dieses boolesche Attribut zeigt an, dass der Benutzer nicht mit der Steuerung interagieren kann. Wenn dieses Attribut nicht angegeben ist, erbt die Steuerung ihre Einstellung vom umgebenden Element, zum Beispiel
<fieldset>
; wenn es kein umgebendes Element gibt, wenn dasdisabled
-Attribut gesetzt ist, ist die Steuerung aktiviert. form
-
Das Formularelement, mit dem das
<textarea>
-Element verbunden ist (seinen "Formularbesitzer"). Der Wert des Attributs muss dieid
eines Formularelements im gleichen 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 an beliebiger Stelle innerhalb eines Dokuments zu platzieren, nicht nur als Nachkommen von Formularelementen. 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 an Zeichen eingeben.
minlength
-
Die minimale Zeichenlä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 Platzhaltertexts müssen beim Darstellen 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 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 zeigt an, dass der Benutzer den Wert der Steuerung nicht ändern kann. Im Gegensatz zum
disabled
-Attribut verhindert dasreadonly
-Attribut nicht, dass der Benutzer in der Steuerung klickt oder auswählt. Der Wert einer schreibgeschützten Steuerung wird trotzdem mit dem Formular übermittelt. required
-
Dieses Attribut gibt an, dass der Benutzer einen Wert eingeben muss, bevor er ein Formular übermittelt.
rows
-
Die Anzahl der sichtbaren Textzeilen für die Steuerung. 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>
von der darunterliegenden Browser-/Betriebssystem-Rechtschreibprüfung überwacht wird. Der Wert kann sein:true
: Gibt an, dass das Element hinsichtlich Rechtschreibung und Grammatik überprüft werden muss.default
: Gibt an, dass das Element gemäß einem Standardverhalten agieren soll, möglicherweise basierend auf demspellcheck
-Wert des übergeordneten Elements.false
: Gibt an, dass das Element nicht auf Rechtschreibung überprüft werden soll.
wrap
-
Gibt an, wie die Steuerung den Wert für die Formularübermittlung umbrochen soll. Mögliche Werte sind:
hard
: Der Browser fügt automatisch Zeilenumbrüche (CR+LF) ein, damit jede Zeile nicht länger als die Breite der Steuerung 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.off
Nicht standardisiert : Wiesoft
, aber verändert das Erscheinungsbild zuwhite-space: pre
, sodass Zeilenabschnitte, diecols
überschreiten, nicht umbrochen werden und das<textarea>
horizontal scrollbar wird.
Wenn dieses Attribut nicht angegeben wird, ist
soft
der Standardwert.
Gestaltung mit CSS
<textarea>
ist ein ersetztes Element — es hat intrinsische Dimensionen, wie ein Rasterbild. Standardmäßig ist der display
-Wert inline-block
. Im Vergleich zu anderen Formularelementen ist es relativ einfach zu gestalten, da sein Boxmodell, seine Schriftarten, sein Farbschema usw. leicht mit regulärem CSS manipulierbar sind.
Gestaltung von HTML-Formularen bietet einige nützliche Tipps zur Gestaltung von <textarea>
s.
Baseline-Inkonsistenz
Die HTML-Spezifikation definiert nicht, wo die Grundlinie eines <textarea>
liegt, deshalb setzen verschiedene Browser sie an unterschiedliche Positionen. Für Gecko ist die <textarea>
-Grundlinie auf die Grundlinie der ersten Zeile des Textarea gesetzt, in einem anderen Browser kann sie am unteren Ende des <textarea>
-Rahmens gesetzt sein. Verwenden Sie nicht vertical-align: baseline
darauf; das Verhalten ist unvorhersehbar.
Steuerung, ob ein Textbereich vergrößert werden kann
In den meisten Browsern sind <textarea>
s vergrößerbar — 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 — die Größenänderung ist standardmäßig aktiviert, aber Sie können sie explizit deaktivieren, indem Sie einen resize
-Wert von none
verwenden:
textarea {
resize: none;
}
Gestaltung gültiger und ungültiger Werte
Gültige und ungültige Werte eines <textarea>
-Elements (z. B. diejenigen innerhalb und außerhalb der von minlength
, maxlength
oder required
festgelegten Grenzen) können durch die Pseudoklassen :valid
und :invalid
hervorgehoben werden. Zum Beispiel, um Ihrem Textbereich einen anderen Rahmen zu geben, je nachdem, 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 Textarea mit einer festen Anzahl von Zeilen und Spalten, einigen Standardinhalten und CSS-Stilen, die verhindern, dass Benutzer das Element auf mehr als 500px Breite und 130px Höhe ändern:
<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 Mindest- und Höchstanzahl von Zeichen — von 10 beziehungsweise 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 Anzahl das Minimum unterschreitet, aber es macht den eingegebenen Wert im <textarea>
ungültig. Beachten Sie auch, dass selbst wenn Sie einen minlength
-Wert gesetzt haben (z. B. 3), ein leeres <textarea>
immer noch als gültig angesehen wird, es sei denn, Sie haben auch das required
-Attribut gesetzt.
Beispiel mit "placeholder"
Dieses Beispiel hat einen Platzhalter gesetzt. Beachten Sie, wie er 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
Hinweis:
Platzhalter sollten nur verwendet werden, um ein Beispiel für die Art der Daten zu zeigen, 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.
Deaktivierte und schreibgeschützte Textbereiche
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 gesendet.
Der Wert des disabled
-Elements wird nicht gesendet und 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
Inhaltskategorien | Fluss-Inhalt, Phrasen-Inhalt, Interaktiver Inhalt, gelistet, beschriftbar, zurücksetzbar, und übermittelbar formular-assoziiertes Element. |
---|---|
Erlaubter Inhalt | Text |
Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
Erlaubte Eltern | Jedes Element, das Phrasen-Inhalt akzeptiert. |
Implizite ARIA-Rolle |
textbox
|
Erlaubte ARIA-Rollen | Keine role erlaubt |
DOM-Schnittstelle | [`HTMLTextAreaElement`](/de/docs/Web/API/HTMLTextAreaElement) |
Spezifikationen
Specification |
---|
HTML # the-textarea-element |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Andere formularbezogene Elemente: