Das Tag <textarea> wird für die Bestimmung des Bereichs, wo der Benutzer den mehrzeiligen Text eingeben kann, verwendet. Im Unterschied zum Tag <input>, wo die Übertragung der Zeile im Textfeld unmöglich ist, sind die Textübertragungen im Tag <textarea> möglich und werden beim Absenden von Daten an den Server gespeichert.
Zwischen den Start- <textarea> und Endtags </textarea> kann beliebiger Text, der durch nichtproportionale Schriftart dargestellt wird, platziert werden. Im Textfeld kann beliebige Anzahl von Textsymbolen eingegeben werden.
Syntax
Der Inhalt des Elements wird zwischen den Start- (<textarea>) und Endtags (</textarea>) geschrieben.
Das Tag <textarea> wird innerhalb des Tages <form> verwendet.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<form>
<textarea name="comment" rows="12" cols="35">Senden Sie Ihre Kommentare an den Autor.</textarea><br>
<input type = "submit" name = "submitInfo" value = "Absenden">
</form>
</body>
</html>Ergebnis
In diesem Beispiel haben wir den Textbereich durch das Tag <textarea> bestimmt, haben ihm den Namen “comment” mithilfe des Attributes name gegeben; wir haben die Höhe von Zeilen (12 Symbole) mithilfe des Attributes rows bestimmt und haben die Breite des Feldes durch das Attribut cols (35 Symbole) eingegeben. Wir haben dazu in der Form eine Taste für das Absenden der eingegebenen Information platziert.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</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>Hier verwenden wir CSS-Stile, um das Aussehen des Textfeldes anzupassen.</p>
<textarea class="comment"> Senden Sie Ihre Kommentare an den Autor.</textarea>
<br>
<input type="submit" name="submitInfo" value="Absenden">
</form>
</body>
</html>Ergebnis
In diesem Beispiel haben wir die CSS-Stile für die visuelle Gestaltung des Textfeldes verwendet.
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| autocomplete | on off |
Es bestimmt, ob der Inhalt des Elementes vom Browser (Autovervollständigen) automatisch ergänzt werden kann. |
| autofocus | autofocus | Es bestimmt, dass das Textgebiet beim Hochladen der Webseite automatisch einen Fokus bekommen muss. |
| cols | number | Es bestimmt die sichtbare Breite des Textgebietes (durch Symbole). Voreingestellt beträgt der Wert 20 Symbole. |
| dirname | textareaname.dir | Es bestimmt die Richtung des Textes und gibt an den Server weiter. |
| disabled | disabled | Es ist ein logisches Attribut und bezeichnet, dass das Textgebiet ausgeblendet werden muss. |
| form | form_id | Es bestimmt eine oder einige Form, zu denen das Element gehört und sie miteinander dem Identifikator (id) verbindet. |
| maxlenght | number | Es bestimmt die maximale Anzahl von Symbolen, die das Textbereich enthalten muss. |
| minlength | number | Es bestimmt die manimale Anzahl von Symbolen, die das Textbereich enthalten muss. |
| name | text | Es bezeichnet den Namen des Textfeldes. |
| placeholder | text | Es bezeichnet den Text des Vorsagens, das den erwarteten Wert für die Eingabe vom Benutzer ins Element beschreibt. Das Vorsagen wird im leeren Textfeld dargestellt, und wird beim Fokus verlorengehen. |
| readonly | readonly | Es bezeichnet, dass das Textgebiet nur fürs Lesen zugänglich ist. |
| required | required | Es ist ein logisches Attribut und bezeichnet, dass das Textgebiet vor dem Absenden ausgefüült werden muss. |
| rows | number | Es bestimmt die sichtbare Zahl der Zeilen auf dem Textgebiet. Voreingestellt beträgt der Wert 2 Symbole. |
| wrap | Es bestimmt, wie der Text übertragen werden soll, wenn sich die Form abgesendet wird. | |
| soft | (voreingestellt) Der Text wird ohne Zeilenumbruch ohne Ergänzung der zusätzlichen Zeilenumbrüche abgesendet. | |
| hard | Automatisch stellt der Browser die Zeilenumbrüche so ein, dass jede Zeile nicht breiter als das Textfeld sein wird. Es wird nur dann verwendet, wenn das Attribut cols vorhanden ist. |
Das Tag <textarea> unterschtützt Globale Attribute und Globale Eventhandler.
Browser-Support
|
|
|
|
|
|---|---|---|---|---|
| ✓ | ✓ | ✓ | ✓ | ✓ |
Übe dein Wissen
