HTML textarea: Mehrzeilige Eingaben, Längenlimits, readonly und Formularwerte

HTML textarea akzeptiert mehrere Zeilen reinen Textes. Legen Sie den anfänglichen Inhalt zwischen den öffnenden und schließenden Tags ab, verwenden Sie rows/cols für die Anzeigengröße und minlength/maxlength für die Eingabelänge. Setzen Sie name, um den Wert mit einem Formular zu übermitteln.

Anzeigengröße, Anfangsinhalte und Eingabebegrenzungen

textarea benötigt ein schließendes Tag. Im Gegensatz zu input verwendet es kein HTML-Value-Attribut für den Anfangswert. Zeilenumbrüche und Leerzeichen zwischen seinen Tags beeinflussen den Inhalt, daher sollte überprüft werden, dass die Formatierungseinrückung keine unerwünschten Eingaben einführt.

Führen Sie ein komplettes Beispiel mit mehrzeiliger Eingabe aus

Speichern Sie diesen vollständigen Code als textarea.html und öffnen Sie ihn in einem Browser. Kein Server oder zusätzliche Bibliothek wird benötigt. Die Schaltfläche "Senden" zeigt die Namen/Werte-Einträge des Browsers an, anstatt sie zu senden.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>textarea-Eingaben und Formularwerte</title>
  <style>
    body { font-family: sans-serif; margin: 24px; }
    label, textarea { display: block; }
    textarea { max-width: 100%; box-sizing: border-box; margin: 8px 0 20px; resize: vertical; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Anfrage schreiben</h1>
  <form id="demo">
    <label for="message">Nachricht (5–200 Codeeinheiten)</label>
    <textarea id="message" name="message" rows="4" cols="32"
      minlength="5" maxlength="200" required
      placeholder="Beschreiben Sie das Problem und das gewünschte Ergebnis.">Dies ist die erste Zeile.
Dies ist die zweite Zeile.</textarea>
    <label for="reference">Schreibgeschützter Hinweis</label>
    <textarea id="reference" name="reference" rows="2" readonly>Bitte geben Sie die Bestellnummer an.</textarea>
    <label for="locked">Deaktiviertes Feld</label>
    <textarea id="locked" name="locked" rows="2" disabled>Dieser Wert wird nicht übermittelt.</textarea>
    <button type="submit">Formularwerte anzeigen</button>
    <button type="reset">Zurücksetzen</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.querySelector('#demo');
    const result = document.querySelector('#result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify([...new FormData(form).entries()], null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Senden Sie das ursprüngliche Formular: message und reference erscheinen. Das JSON \n zeigt einen Zeilenumbruch im Wert an; locked wird ausgelassen.
2. Löschen Sie die Nachricht und senden Sie sie: die erforderliche Validierung blockiert dies. Geben Sie dann direkt zwei oder drei normale Zeichen ein und senden Sie, um die Mindestlängen-Validierung zu überprüfen.
3. Geben Sie <b>Practice</b> als Nachricht ein und senden Sie sie. Da Eingabe und Ausgabe Text sind, zeigt das Ergebnis tagförmigen Text anstelle von Fettformatierung.
4. Zurücksetzen stellt die ursprüngliche zweizeilige Nachricht wieder her und löscht das Ergebnis. Zurücksetzen kehrt zu den HTML-Standardeinstellungen zurück, anstatt den Wert leer zu machen.

Die native Browser-Validierung unterstützt die Benutzereingaben und die normale Formularübermittlung. Dieselben Prüfungen sind für durch Skript zugewiesene Werte nicht garantiert, daher müssen reale Anwendungen erforderliche Werte, zulässige Längen und Formate auch auf dem Server überprüfen.

Unterscheiden Sie visuelles Umbrücken von tatsächlichen Zeilenumbrüchen

Ein durch die Feldbreite verursachter visueller Umbruch unterscheidet sich von einem mit Enter eingefügten Zeilenumbruch. Das standardmäßige wrap="soft" fügt eingefügte Zeilenumbrüche nicht hinzu, nur weil der Text visuell umbricht. wrap="hard" fügt eingefügte Zeilenumbrüche gemäß der angegebenen Spaltenbreite hinzu und erfordert cols. Um auf einen schmalen Bildschirm zu passen, beginnen Sie mit dem standardmäßigen Zeilenumbruch und der CSS-Breite.

Das Beispiel für max-width: 100% hilft, das Feld auf schmalen Bildschirmen innerhalb seines übergeordneten Elements zu halten, während resize: vertical den Benutzern erlaubt, die Höhe zu ändern. Die Pixelbreite von cols="32" hängt von Schriftart, Zeichenbreiten und Browser ab, daher sollte man nicht davon ausgehen, dass genau 32 Zeichen auf eine Zeile passen.

Werte in JavaScript lesen und auf dem Server validieren

Lesen Sie die aktuelle Eingabe über textarea.value und die Standardwerte über textarea.defaultValue. Um Benutzeränderungen zu lesen, verwenden Sie den Wert anstelle des textContent des Tags. Das Beispiel schreibt Ergebnisse in textContent, sodass die Eingabe nicht als HTML ausgeführt wird.

readonly und disabled sind keine Sicherheitskontrollen. Benutzer können Werte über Entwicklertools oder separate Anfragen ändern, überprüfen Sie daher unveränderbare Bestellnummern oder Berechtigungsdaten anhand vertrauenswürdiger Serverdaten. Wenn der Server Bytes oder eine andere Zeicheneinheit zählt, prüfen Sie, ob sein Limit dieselbe Maßeinheit verwendet wie das maxlength des Browsers.

Die MDN-Referenz zum textarea-Element erklärt die Attribute und Einschränkungen.