HTML Textarea
Zuletzt klärten form="id" und form* Besitz und Submit-Routing. Textarea ist ein anderer Job: mehrzeiliges Textfeld für Kommentare und Notizen. Einzeiliges input eignet sich schlecht für Absätze. Nutze textarea, wenn Nutzer mehr als eine Zeile brauchen.
Warum es textarea gibt
Kontaktformulare, Tickets, Bios und Reviews brauchen scrollbare Höhe. Textarea sendet den Text als ein benanntes Feld. Label, name und Größenhinweise bleiben — aber der Inhalt sitzt zwischen den Tags, nicht wie bei input in value.
Direkte Antwort
1) textarea mit id, name, rows schreiben. 2) label per for verbinden. 3) Standardtext zwischen die Tags — nicht value. 4) Optional placeholder, maxlength, readonly, disabled, required, wrap. 5) Mehrzeilige Eingabe — nicht die form=-Zuordnung der Voreinheit.
📊 Textarea attributes beginners use
| Attribute | Role | Beginner tip |
|---|---|---|
| name | Submit key | Required if the text should post with the form |
| id | Label hook | Match label for= for accessible naming |
| rows | Visible height hint | Lines of height before scrolling |
| cols | Visible width hint | Prefer CSS width for responsive layouts |
| placeholder | Soft hint | Disappears when the user types |
| maxlength | Character cap | Browser-enforced upper bound |
| readonly / disabled | Lock vs mute | readonly still submits; disabled usually does not |
| wrap | Soft/hard wrap | Affects how line breaks are submitted (soft vs hard) |
Feedback-Formular: beschriftete Message-Box
Kurzes Feedback hält E-Mail als einzeiliges input und die Nachricht als textarea. Startertext steht zwischen den Tags.
<form action="/feedback" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="6" cols="40"
placeholder="What went well? What can improve?">Thanks for reading —</textarea>
<button type="submit">Send feedback</button>
</form>
Feedback-Demo lesen
- Mehrzeilig ist textarea, nicht input
- id passt zu label for
- name schlüsselt den Absatz
- rows/cols deuten Größe an
- Standardtext zwischen den Tags
- Labels klar halten
- form= hier unnötig — Felder liegen im form
Größe, Limits und wrap
Zweites Demo: Bio mit maxlength, wrap=soft und CSS statt cols. readonly auf einer Nur-Lese-Zusammenfassung.
<label for="bio">Short bio</label>
<textarea id="bio" name="bio" rows="4" maxlength="280"
wrap="soft"
style="width:100%; max-width:28rem; resize:vertical;"
placeholder="Up to 280 characters"></textarea>
<label for="summary">Auto summary (read-only)</label>
<textarea id="summary" name="summary" rows="3" readonly>Generated preview — edit the bio above.</textarea>
Größen-Demo lesen
- maxlength begrenzt die Länge
- wrap=soft für visuelle Umbrüche ohne hard CR/LF
- CSS width und resize verfeinern
- readonly sichtbar, nicht editierbar
- name bleibt für Submit nötig
- weiter: select für Listenwahl
Textarea vs. input wählen
- Kurze Zeile: input
- Absätze/Nachrichten: textarea
- Größe mit rows und CSS; cols eher Legacy
- Standardinhalt zwischen Tags — nicht value
- Weiterhin label und name
- Im form nesten wenn möglich
- Nicht mit formaction/Besitz verwechseln
Übung — bauen und skalieren
- Feedback-Demo; Text zwischen Tags ändern
- rows verkleinern
- maxlength setzen
- cols durch CSS-Breite ersetzen
- Kurz value testen und entfernen
- Satz: textarea zwischen Tags; input mit value
- Listenwahl gehört zu select als Nächstes
Leichte Fehler
- Standardtext in value statt zwischen Tags
- name vergessen
- Kein label
- Einzeiliges input trotz Mehrzeilenbedarf
- Verwechslung mit form=/formaction
- Nur cols für responsive Breite
- disabled statt readonly
Zusammenfassung
- textarea = mehrzeiliger Text
- label und meist name
- Standardtext zwischen den Tags
- rows/CSS; optional maxlength, placeholder, readonly
- Nicht die Formular-Zuordnung der Voreinheit
- weiter: select
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt