<textarea> Formular Element – mehrzeiliges Textfeld

Mit dem HTML-Befehl <textarea> erstellen wir ein mehrzeiliges Textfeld. Dieses kann dann in Formularen mit mehrzeiligem Text (bis zu ganzen Romanen) gefüllt werden.

Der grundsätzliche Aufbau:

<label for="textfeld_01_id">Ihre Anfrage:</label>

<textarea id="textfeld_01_id" name="textfeld_01" rows="6" cols="60">
Hier kommt der Inhalt des Textfeldes</textarea>

Der HTML-Befehl <textarea> umschließt den Inhalt, der innerhalb des anzeigten Textfeldes ausgegeben wird.

Zusätzlich benötigen wir folgenden Attribute:

Für die Anzeige des Inhalts wird normalerweise der Font Courier verwendet. Diese Schriftart ist dicktengleich (Monospaced Fonts), was bedeutet, dass jeder Buchstabe die gleiche Breite benötigt.

Natürlich muss ein <textarea> eingebettet werden in den HTML-Bereich <form, damit dieser auf als Formularinhalt abgesendet werden kann.

Für die optimale Usability sollte der Textbereich immer mit einem Label-Befehl verwendet werden. Dieser kann angeklickt werden und der Cursor wird im Textbereich platziert. Unser Code von oben erweitern wir mit einem Label:

<label for="textfeld_01_id">Ihre Anfrage:</label>

<textarea id="textfeld_01_id" name="textfeld_01" rows="6" cols="60">
Hier kommt der Inhalt des Textfeldes</textarea>

Wir können weitere Attribute nutzen bei <textarea>:

Beispiel für die Einsatz:

<label for="textfeld_01_id">Ihre Anfrage:</label>

<textarea id="textfeld_01_id" name="textfeld_01" rows="6" cols="60"
  placeholder="hier haben Sie Raum für Ihre Anfrage"
  required autofocus wrap="hard" >
Hier kommt der Inhalt des Textfeldes
</textarea>

Die Anzeige kann über CSS beeinflusst werden, was bei Breite und Höhe sehr sinnvoll ist.

textarea {
    width: 100%;
}

Oder wenn es nur für ein einzelnes Textfeld gelten soll können wir es über den ID-Selektor angesprochen (das ist auch der Grund, warum im Beispiel oben für die ID und das Attribute „name“ unterschiedliche Bezeichnungen gewählt wurden):

#textfeld_01_id {
    width: 100%;
}

Durch die Angabe der Breite über CSS wird die HTML-Angabe der Breite über das Attribut cols ignoriert – CSS hat Vorrang vor der HTML-Attributs-Angabe.

Tipp <textarea> und PHP

Tipp am Rande für PHP: Über das mehrzeilige Textfeld kann auch gut HTML-Code zur Kontrolle angezeigt werden. Natürlich fragt man sich als erstes, warum man sowas überhaupt benötigen könnte. Aber bitte an PHP denken. Über die Programmiersprache erzeugt man auch sehr oft HTML-Ausgaben, die man dann auch zur Sichtkontrolle in einem Textfeld ausgeben lassen kann.