Ausführbare HTML-Docs: HTML Textarea

Q: Wie erstelle ich eine Textarea in HTML?

Schreib in ein Formular, mit einem . Anders als hat sie ein schließendes Tag, und alles zwischen den Tags ist der Anfangstext.

Q: Wie lege ich den Standardwert einer Textarea fest?

Schreib den Text zwischen die Tags: Hello . Eine Textarea hat in HTML kein value-Attribut. In JavaScript liest und setzt du textarea.value.

Q: Wie verhindere ich, dass die Größe einer Textarea geändert wird?

Setz im CSS resize: none. resize: vertical ist meistens freundlicher: Der Leser kann sie für langen Text immer noch höher ziehen, aber dein Layout nicht kaputt machen, indem er sie breiter zieht.

Q: Wie begrenze ich die Anzahl der Zeichen in einer Textarea?

Füg maxlength="280" hinzu. Der Browser nimmt ab dieser Länge keine Eingabe mehr an. Zeig daneben einen Zähler, der beim Event input aktualisiert wird, damit der Leser weiß, wie viel Platz noch bleibt, und prüf die Länge auch auf dem Server.

So erstellst du eine Textarea

<textarea> ist ein Textfeld für mehr als eine Zeile: Nachrichten, Kommentare, Beschreibungen. rows legt die sichtbare Höhe in Zeilen fest. Tipp ein paar Zeilen ein und drück auf Send:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Textarea</title>
</head>
<body>
  <form>
    <label for="msg">Message</label><br>
    <textarea id="msg" name="message" rows="4" cols="40" placeholder="What would you like to ask?"></textarea>
    <br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

Zwei Dinge unterscheiden sich von <input>: Eine Textarea braucht ein schließendes Tag, und ihr Anfangstext steht zwischen den Tags statt in einem value-Attribut. Ihr name wird mit dem Text als Wert gesendet, einschließlich der Zeilenumbrüche.

Textarea-Attribute

Attribut	Macht
`name`	Der Schlüssel, unter dem der Text gesendet wird
`rows`	Sichtbare Höhe in Zeilen (Standard 2)
`cols`	Sichtbare Breite in Zeichen (Standard 20); CSS `width` ist meist besser
`placeholder`	Ein Hinweis, solange sie leer ist
`maxlength`, `minlength`	Längengrenzen in Zeichen
`required`	Darf nicht leer sein
`readonly`	Kann markiert und kopiert, aber nicht bearbeitet werden; wird trotzdem gesendet
`disabled`	Nicht benutzbar; wird nicht gesendet
`wrap`	`soft` (Standard) oder `hard`, siehe unten
`spellcheck`	`true` oder `false`

Der Standardtext steht zwischen den Tags

Alles zwischen <textarea> und </textarea> ist der Anfangstext, genau so, wie er geschrieben ist: mit Leerzeichen, Tabs und Zeilenumbrüchen. Nur ein einziger Zeilenumbruch direkt nach dem öffnenden Tag wird ignoriert. Dadurch wird Einrückung zur Falle:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Default text</title>
  <style>
    textarea { display: block; margin-bottom: 12px; font: inherit; }
  </style>
</head>
<body>
  <textarea rows="2">Hello, this is the default text.</textarea>

  <textarea rows="3">
    Indented to match the HTML
  </textarea>

  <p id="out"></p>
  <script>
    const [a, b] = document.querySelectorAll('textarea');
    document.querySelector('#out').textContent =
      'Lengths: ' + a.value.length + ' and ' + b.value.length +
      ' (the second adds 4 leading spaces, a line break and 2 more spaces)';
  </script>
</body>
</html>

Die zweite Textarea beginnt mit vier Leerzeichen und endet mit einem Zeilenumbruch und zwei weiteren Leerzeichen, die der Leser alle löschen muss. Schreib den Standardtext direkt an die Tags.

HTML in einer Textarea wird nicht dargestellt; <b>hi</b> zwischen den Tags erscheint genau als dieser Text.

Breite, Größe ändern und automatisch wachsen

Browser lassen den Leser die Ecke ziehen, um die Größe einer Textarea zu ändern. CSS resize begrenzt das, und width: 100% mit box-sizing: border-box lässt sie ihren Container exakt ausfüllen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Resize</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 4px 0 14px;
      padding: 8px;
      font: inherit;
      border: 2px solid #9ca3af;
      border-radius: 8px;
    }
    .vertical { resize: vertical; min-height: 60px; }
    .none { resize: none; }
    .grow { resize: none; overflow: hidden; }
  </style>
</head>
<body>
  <label>resize: vertical <textarea class="vertical" rows="2"></textarea></label>
  <label>resize: none <textarea class="none" rows="2"></textarea></label>
  <label>grows as you type <textarea class="grow" rows="2" id="grow"></textarea></label>

  <script>
    const grow = document.querySelector('#grow');
    grow.addEventListener('input', () => {
      grow.style.height = 'auto';
      const border = grow.offsetHeight - grow.clientHeight;
      grow.style.height = grow.scrollHeight + border + 'px';
    });
  </script>
</body>
</html>

Die letzte setzt bei jedem Tastendruck ihre Höhe zurück und dann auf scrollHeight (die Höhe ihres Inhalts und Innenabstands) plus ihre Rahmen. Tipp mehrere Zeilen hinein: Sie zeigt nie eine Scrollleiste. resize: vertical ist der freundlichste Standard: Lange Antworten bekommen Platz, und niemand kann das Feld breiter als das Layout ziehen.

Chromium-Browser schaffen das automatische Wachsen mit field-sizing: content allein in CSS. Browser, die das nicht unterstützen, ignorieren die Zeile und behalten die normale Größe. Es ist also unbedenklich, sie hinzuzufügen, aber behalte das Skript, wenn jeder Leser das wachsende Feld bekommen soll.

maxlength und ein Zeichenzähler

maxlength stoppt die Eingabe bei einer bestimmten Zeichenzahl. Allein gibt es keine Warnung, der Leser merkt es also erst, wenn das Tippen nicht mehr funktioniert. Ein Zähler behebt das:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Character counter</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 8px; }
    .count { font-size: 14px; color: #4b5563; }
    .count.near { color: #b45309; font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <label for="bio">Short bio</label>
    <textarea id="bio" name="bio" rows="3" maxlength="100" aria-describedby="bio-count"></textarea>
    <p class="count" id="bio-count" aria-live="polite">100 characters left</p>
    <button type="submit">Save</button>
  </form>

  <script>
    const bio = document.querySelector('#bio');
    const count = document.querySelector('#bio-count');
    bio.addEventListener('input', () => {
      const left = bio.maxLength - bio.value.length;
      count.textContent = left + ' characters left';
      count.classList.toggle('near', left <= 20);
    });
  </script>
</body>
</html>

aria-describedby lässt Screenreader den Zähler zusammen mit dem Feld vorlesen, und aria-live="polite" sagt Änderungen daran zwischen den Tastendrücken an. maxlength setzt nur der Browser durch, der Server muss die Länge also ebenfalls prüfen.

Zeilenumbrüche im gesendeten Text

Die Zeilenumbrüche des Lesers werden mit dem Text gesendet. In den gesendeten Daten wird jeder zu einem Paar aus Wagenrücklauf und Zeilenvorschub (%0D%0A in einem URL-kodierten Formular), was die meisten Server erwarten. Um den Text später mit seinen Zeilenumbrüchen auf einer Seite anzuzeigen, wandelst du sie bei der Ausgabe in <br> um oder stylst das Element mit white-space: pre-line.

wrap="hard" (braucht cols) geht weiter: Es fügt auch dort Zeilenumbrüche ein, wo der Text optisch umgebrochen ist, der Server bekommt also Zeilen, die nicht länger als cols Zeichen sind. Der Standard, wrap="soft", sendet nur die Umbrüche, die der Leser getippt hat.

Eine Textarea stylen

Chrome und Firefox geben Textareas eine Monospace-Schrift mit etwa 13px, deshalb wirkt eine Textarea oft fehl am Platz. font: inherit behebt das. Behalte einen sichtbaren Fokusstil, wenn du den Rahmen änderst:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled textarea</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; }
    textarea { display: block; margin: 4px 0 12px; }
    .styled {
      font: inherit;
      padding: 10px 12px;
      border: 1px solid #9ca3af;
      border-radius: 8px;
      resize: vertical;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
    .styled::placeholder { color: #6b7280; }
  </style>
</head>
<body>
  <label>Browser default <textarea rows="2">Monospace, small</textarea></label>
  <label>Styled <textarea class="styled" rows="2">Same font as the page</textarea></label>
</body>
</html>

Platzhaltertext sollte einen lesbaren Kontrast haben; das helle Grau vieler Designs ist schwer zu lesen. Und wie bei jedem Feld ist der Platzhalter kein Label: Er verschwindet, sobald der Leser tippt. Labels erklärt die Seite zum HTML Label.

Häufige Fehler

<textarea value="...">. Es gibt kein value-Attribut; schreib den Text zwischen die Tags.
Den Standardtext mit dem HTML einrücken. Die Leerzeichen werden Teil des Werts.
Ein selbstschließendes <textarea />. Es ist kein Void-Element; ohne </textarea> wird der Rest der Seite als Text hineingezogen.
Kein font: inherit, sodass das Feld eine kleine Monospace-Schrift verwendet.
resize: none mit kleiner fester Höhe. Lange Antworten landen in einem winzigen Kasten mit Scrollleiste.
Sich allein auf maxlength verlassen. Prüf die Länge auch auf dem Server.

Häufig gestellte Fragen

Wie erstelle ich eine Textarea in HTML?

Schreib <textarea name="message" rows="4"></textarea> in ein Formular, mit einem <label>. Anders als <input> hat sie ein schließendes Tag, und alles zwischen den Tags ist der Anfangstext.

Wie lege ich den Standardwert einer Textarea fest?

Schreib den Text zwischen die Tags: <textarea name="bio">Hello</textarea>. Eine Textarea hat in HTML kein value-Attribut. In JavaScript liest und setzt du textarea.value.

Wie verhindere ich, dass die Größe einer Textarea geändert wird?

Setz im CSS resize: none. resize: vertical ist meistens freundlicher: Der Leser kann sie für langen Text immer noch höher ziehen, aber dein Layout nicht kaputt machen, indem er sie breiter zieht.

Wie begrenze ich die Anzahl der Zeichen in einer Textarea?

Füg maxlength="280" hinzu. Der Browser nimmt ab dieser Länge keine Eingabe mehr an. Zeig daneben einen Zähler, der beim Event input aktualisiert wird, damit der Leser weiß, wie viel Platz noch bleibt, und prüf die Länge auch auf dem Server.

Warum hat meine Textarea eine andere Schrift?

Chrome und Firefox geben Textareas standardmäßig eine Monospace-Schrift mit etwa 13px. Füg font: inherit hinzu, damit sie zum Rest der Seite passt.

Verwandte Konzepte