Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

<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:

Attribut Beschreibung
id zum eindeutigen ansprechen über CSS (nicht zwangsläuft notwendig)
name um auf den übermittelten Inhalt zugreifen zu können (notwendig)
rows Anzahl der Reihen (sinnvoll)
cols Anzahl der Spalten, wie Breit die Ausgabe erfolgt (sinnvoll, sonst wird nur eine Breite von 20 als Standard genutzt, was oft zu schmal ist)

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>:

Attribut Beschreibung
autofocus bekommt automatisch den Fokus beim Laden der Seite
disable abschalten der Eingabefunktion durch Nutzer. Somit wird der Inhalt nur noch angezeigt
readonly wie „disable“
placeholder Textangabe, was als Inhalt des Textfeldes gewünscht ist
required Inhalt ist zwingend notwendig, sonst kann Formular nicht abgesendet werden
wrap hard/soft – legt fest, wie der Inhalt umgebrochen wird beim Absenden des Formular

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.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe