HTML <textarea> Tag
Das HTML <textarea>-Tag definiert ein Formularfeld für mehrzeilige Texteingaben. Zeilenumbrüche sind beim Absenden des Formulars erlaubt.
Das <textarea>-Tag definiert ein Formularfeld, in das Benutzer einen mehrzeiligen Text eingeben können. Anders als das <input>-Tag ist der Zeilenumbruch innerhalb von <textarea> beim Absenden des Formulars erlaubt.
Ein Textbereich kann eine unbegrenzte Anzahl von Zeichen enthalten. Der Text innerhalb dieses Tags wird standardmäßig in einer Proportionalschrift dargestellt.
Das <textarea>-Tag wird innerhalb des <form>-Tags verwendet.
Syntax
Das <textarea>-Tag kommt paarweise vor. Der Inhalt wird zwischen dem öffnenden (<textarea>) und dem schließenden (</textarea>) Tag geschrieben.
Ein häufiger Anfängerfehler: Ein <textarea> nimmt kein value-Attribut entgegen. Der Standardwert steht zwischen dem öffnenden und dem schließenden Tag, anders als bei einem einzeiligen <input>, das value="…" verwendet. Zum Beispiel zeigt <textarea>Hello</textarea> „Hello" an, während <input value="Hello"> ebenfalls „Hello" anzeigt — aber <textarea value="Hello"></textarea> zeigt nichts an.
Beispiel des HTML-<textarea>-Tags:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea><br />
<input type="submit" name="submitInfo" value="Submit" />
</form>
</body>
</html>Ergebnis
In diesem Beispiel verwenden wir <textarea>, um das Textfeld zu definieren, das name-Attribut, um dem Feld einen Namen zuzuweisen („comment"), das rows-Attribut, um die sichtbare Höhe festzulegen (12 Zeilen), und das cols-Attribut, um die sichtbare Breite festzulegen (35 Zeichen).
Ein Label mit einem <textarea> verknüpfen
Jedes Formularfeld sollte ein <label> haben. Verbinden Sie das Label mit dem Textbereich, indem Sie dem Textbereich eine id geben und das for-Attribut des Labels auf denselben Wert zeigen lassen. So können Screenreader das Feld ankündigen und Benutzer durch Klicken auf den Label-Text den Fokus in den Textbereich verschieben — beides verbessert Barrierefreiheit und Benutzerfreundlichkeit.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<label for="comment">Your comment:</label><br />
<textarea id="comment" name="comment" rows="6" cols="40"></textarea><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Eingaben begrenzen und Hinweise geben
Verwenden Sie das maxlength-Attribut, um die maximale Zeichenanzahl zu begrenzen, die ein Benutzer eingeben kann, und das placeholder-Attribut, um einen kurzen Hinweis in einem leeren Feld anzuzeigen. Der Platzhalter verschwindet, sobald der Benutzer zu tippen beginnt — er ist kein Standardwert und wird daher nie mit dem Formular übermittelt.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post">
<label for="bio">Short bio (max 100 characters):</label><br />
<textarea id="bio" name="bio" rows="4" cols="40" maxlength="100"
placeholder="Tell us a little about yourself..."></textarea><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Das <textarea>-Element mit CSS gestalten
Das <textarea>-Tag gilt als ersetztes Element, da es bestimmte intrinsische Abmessungen hat. Das Gestalten dieses Tags ist mit regulärem CSS relativ einfach.
Gültige und ungültige Werte können mit den Pseudoklassen :valid und :invalid hervorgehoben werden.
In den meisten Browsern ist <textarea> aufgrund der CSS-Eigenschaft resize in der Größe veränderbar. Die Größenänderung ist standardmäßig aktiviert. Sie können sie deaktivieren, indem Sie den resize-Wert auf none setzen.
Beispiel des HTML-<textarea>-Tags mit CSS-Eigenschaften:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.comment {
width: 60%;
height: 100px;
padding: 10px;
outline: 0;
border: 3px solid #1c87c9;
background: #d0e2bc;
line-height: 20px;
}
</style>
</head>
<body>
<form>
<p>Here we use CSS styles to customize the look of the text field.</p>
<textarea class="comment"> Send your comments to the author.</textarea>
<br />
<input type="submit" name="submitInfo" value="Submit" />
</form>
</body>
</html>In diesem Beispiel verwenden wir CSS-Stile, um das Aussehen des Textfeldes anzupassen.
Größenänderung mit der resize-Eigenschaft steuern
Standardmäßig fügen die meisten Browser in der Ecke eines <textarea> einen Ziehgriff ein, damit Benutzer die Größe in beide Richtungen ändern können. Sie können dies mit der CSS-Eigenschaft resize steuern:
resize: none;— deaktiviert die Größenänderung vollständig.resize: vertical;— erlaubt nur die Änderung der Höhe.resize: horizontal;— erlaubt nur die Änderung der Breite.resize: both;— die Standardeinstellung, erlaubt die Größenänderung in beide Richtungen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
textarea {
width: 60%;
padding: 8px;
}
.no-resize {
resize: none;
}
.vertical-only {
resize: vertical;
}
.horizontal-only {
resize: horizontal;
}
</style>
</head>
<body>
<p>Not resizable:</p>
<textarea class="no-resize" rows="3"></textarea>
<p>Resizable vertically only:</p>
<textarea class="vertical-only" rows="3"></textarea>
<p>Resizable horizontally only:</p>
<textarea class="horizontal-only" rows="3"></textarea>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| autocomplete | on, off | Legt fest, ob für ein Textfeld die automatische Vervollständigung aktiviert sein soll. |
| autofocus | autofocus | Definiert, dass ein Textbereich beim Laden der Seite automatisch den Fokus erhalten soll. |
| cols | number | Definiert die sichtbare Breite eines Textbereichs. Der Standardwert beträgt 20 Zeichen. |
| dirname | dirname | Gibt den Namen eines versteckten Formularsteuerelements an, das beim Absenden die Textrichtung des Textbereichs enthält. |
| disabled | disabled | Definiert, dass ein Textbereich deaktiviert sein soll. |
| form | form_id | Definiert ein oder mehrere Formulare, zu denen der Textbereich gehört (per id). |
| maxlength | number | Definiert die maximale Anzahl von Zeichen, die im Textbereich erlaubt sind. |
| minlength | number | Definiert die minimale Anzahl von Zeichen, die im Textbereich erforderlich sind. |
| name | text | Definiert einen Namen für einen Textbereich. |
| placeholder | text | Definiert einen kurzen Hinweis, der den erwarteten Wert eines Textbereichs beschreibt. Der Hinweis wird angezeigt, wenn das Feld leer ist, und verschwindet, wenn es den Fokus erhält. |
| readonly | readonly | Definiert, dass ein Textbereich schreibgeschützt ist. |
| required | required | Definiert, dass ein Textbereich ausgefüllt werden muss, bevor das Formular gesendet wird. |
| rows | number | Definiert die sichtbare Anzahl von Zeilen in einem Textbereich. Der Standardwert ist browserabhängig (typischerweise 2). |
| spellcheck | true, false, default | Legt fest, ob der Text im <textarea>-Tag vom Browser/Betriebssystem auf Rechtschreibung geprüft werden soll. |
| wrap | soft, hard | Definiert, wie der Text in einem Textbereich beim Absenden des Formulars umgebrochen werden soll. soft (Standard): Text wird ohne zusätzliche Zeilenumbrüche gesendet. hard: Der Browser fügt Zeilenumbrüche basierend auf der Breite ein (erfordert cols). |
Das <textarea>-Tag unterstützt auch die Global Attributes und die Event Attributes.
Verwandte Tags
<input>— einzeilige und spezialisierte Formularsteuerelemente.<form>— der Container, der Formularfelder gruppiert und absendet.<label>— Labels, die Formularfelder barrierefrei machen.