HTML-Tag <textarea>

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.

Für die Bestimmung des Textfeldes können die Attribute cols und rows oder die CSS-Eigenschaften height und width verwendet werden. Mithilfe der CSS-Eigenschaft resize können die Größenveränderungen des Textfeldes erlaubt oder verboten werden.

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



Finden Sie das nützlich?

Ähnliche Artikel