HTML-`<textarea>`-Tag

Das <textarea>-Tag definiert ein Formularfeld, in das Benutzer mehrzeiligen Text eingeben können. Im Gegensatz zum <input>-Tag ist 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 proportionalen Schriftart dargestellt.

Das <textarea> wird innerhalb des <form>-Tags verwendet.

Syntax

Das <textarea>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<textarea>) und dem schließenden (</textarea>) Tag geschrieben.

TIP

Um die Größe eines Textfelds festzulegen, verwenden Sie die Attribute rows und cols oder die CSS-Eigenschaften height und width.

Beispiel für das HTML-`<textarea>`-Tag:

Beispiel für das HTML-<textarea>-Tag|W3Docs

html

<!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>

Try it Yourself »

Ergebnis

textarea example

In diesem Beispiel verwenden wir das <textarea>, um das Textfeld zu definieren, das Attribut name, um diesem Feld einen Namen zuzuweisen („comment“), das Attribut rows, um seine Höhe festzulegen (12 Zeichen), und das Attribut cols, um seine Breite festzulegen (35 Zeichen).

Das `<textarea>`-Element mit CSS gestalten

Das <textarea>-Tag gilt als ersetztes Element, da es einige intrinsische Abmessungen hat. Dieses Tag mit normalem CSS zu gestalten, ist relativ einfach.

Seine gültigen und ungültigen Werte können mit den Pseudoklassen :valid und :invalid hervorgehoben werden.

TIP

In den meisten Browsern ist <textarea> aufgrund der CSS-Eigenschaft resize veränderbar. Das Vergrößern und Verkleinern ist standardmäßig aktiviert. Sie können es deaktivieren, indem Sie den Wert von resize auf none setzen.

Beispiel für das HTML-`<textarea>`-Tag mit CSS-Eigenschaften:

Beispiel für ein Textfeld mit dem HTML-<textarea>-Tag|W3Docs

html

<!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>

Try it Yourself »

In diesem Beispiel verwenden wir CSS-Stile, um das Aussehen des Textfelds anzupassen.

Attribute

Attribute	Wert	Beschreibung
autocomplete	on, off	Gibt an, ob für ein Textfeld die automatische Vervollständigung aktiviert sein soll oder nicht.
autofocus	autofocus	Legt fest, dass ein Textbereich beim Laden der Seite automatisch den Fokus erhalten soll.
cols	number	Legt die sichtbare Breite eines Textbereichs fest. Der Standardwert sind 20 Zeichen.
dirname	dirname	Gibt den Namen eines versteckten Formularsteuerelements an, das die Textrichtung des Textbereichs beim Absenden enthält.
disabled	disabled	Legt fest, dass ein Textbereich deaktiviert sein soll.
form	form_id	Legt ein oder mehrere Formulare fest, zu denen der Textbereich gehört (über id).
maxlength	number	Legt die maximale Anzahl von Zeichen fest, die im Textbereich erlaubt sind.
minlength	number	Legt die minimale Anzahl von Zeichen fest, die im Textbereich erlaubt sind.
name	text	Legt einen Namen für einen Textbereich fest.
placeholder	text	Legt einen kurzen Hinweis fest, 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	Legt fest, dass ein Textbereich schreibgeschützt ist.
required	required	Legt fest, dass ein Textbereich vor dem Absenden des Formulars ausgefüllt sein muss.
rows	number	Legt die sichtbare Anzahl von Zeilen in einem Textbereich fest. Der Standardwert ist 2.
spellcheck	true, false, default	Gibt an, ob der Text im `<textarea>`-Tag vom zugrunde liegenden Browser/Betriebssystem auf Rechtschreibung geprüft werden soll.
wrap	soft, hard	Legt fest, wie der Text in einem Textbereich beim Absenden des Formulars umbrochen wird. soft (Standard): Der 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 außerdem die Global Attributes und die Event Attributes.

Wie man ein HTML-<textarea>-Tag gestaltet

json

{
    "tag_name": "textarea"
}

Practice

What are some of the attributes of the HTML <textarea> tag?

The 'rows' attribute, which specifies the visible number of lines in the text area.The 'color' attribute, which changes the text color in the textarea.The 'cols' attribute, which specifies the visible width of the text area in characters.The 'readonly' attribute, which makes the text area read-only.The 'background' attribute, which changes the background color of the textarea.

HTML-<textarea>-Tag ​

Syntax ​

Beispiel für das HTML-<textarea>-Tag: ​

Ergebnis ​

Das <textarea>-Element mit CSS gestalten ​

Beispiel für das HTML-<textarea>-Tag mit CSS-Eigenschaften: ​

Attribute ​

Practice ​