Das textarea-Element: Platz für mehr Text
Für alles was länger wird als eine Zeile, gibt es die <textarea>: Nachrichten, Kommentare, Adressfelder. Anders als das input hat sie ein schließendes Tag, und was dazwischen steht, ist der vorbelegte Text.
Syntax und Beispiel
HTML-Code
<label for="nachricht">Deine Nachricht:</label>
<textarea id="nachricht" name="nachricht" rows="5"
maxlength="500" required></textarea>Die Attribute
rows: sichtbare Höhe in Textzeilen. Das alte Gegenstückcolsfür die Breite gibt es auch, in der Praxis regelt die Breite aber fast immer das CSS.maxlengthundminlength: Ober- und Untergrenze für die Zeichenzahl.required,placeholder,readonly,disabled: funktionieren wie beim input.wrap="hard": schickt die sichtbaren Zeilenumbrüche beim Absenden mit. Braucht man selten, gut zu wissen dass es existirt.
Zwei Eigenheiten die man kennen sollte
Erstens: Der vorbelegte Text steht zwischen den Tags, nicht in einem value-Attribut. Und alles zählt, auch Einrückungen und Zeilenumbrüche im Quelltext. Wer sein textarea im Code hübsch einrückt, wundert sich über ein Feld voller Leerzeichen. Deshalb schreibt man öffnendes und schließendes Tag am besten direkt hintereinander.
Zweitens: Nutzer können die Textarea in den meisten Browsern an der Ecke größer ziehen. Das ist gut so, lass es ihnen. Falls das Layout es wirklich verbietet, lässt es sich per CSS mit resize: none abschalten, aber überleg zweimal, lange Texte in winzigen Feldern zu tippen macht keine Freude.
Typische Fehler
- Vorbelegten Text als value-Attribut versuchen, siehe oben.
- Das schließende </textarea> vergessen. Dann interpretiert der Browser den kompletten Rest der Seite als Feldinhalt, ein sehr eindrucksvoller Fehler.
- placeholder statt label verwenden.