HTML lernen (3): Formulare einbinden
Mehrzeilige Textfelder
Mehrzeilige Textfelder
Auf dieser Seite
Mit Bild
Ein mehrzeiliges Textfeld
Mit Bild
In HTML-Formularen können Sie auch ein mehrzeiliges Textfeld definieren. Hierfür stehen ihnen wiederum Attribute zur Verfügung, über die Sie die Länge, die Breite und den Zeilenumbruch beeinflussen bzw. bestimmen können. Das Textfeld erzeugen sie zum Beispiel mit der nachfolgenden Anweisung:
Mit Bild
<textarea name="kommentar" cols="20" rows="5" wrap="virtual"></textarea>
Mit Bild
Gültige Attribute
Auch für mehrzeilige Textfelder stehen mehrere Attribute zur Verfügung, über die das Textfeld genau definiert werden kann:
Mit Bild
-
name="telefon"
Weist dem mehrzeiligen Textfeld einen Variablennamen zu. Diese Angabe ist erforderlich, da ein Element ohne Bezeichnung nicht an einen Server bzw. ein CGI-Programm geschickt werden kann. Es sind nur Buchstaben und Zahlen erlaubt, weder Leerzeichen noch Sonderzeichen dürfen verwendet werden.
-
rows="5"
Legt die Anzahl der Zeilen für das Textfeld fest.
-
cols="50"
Definiert die Anzahl der Spalten für das Textfeld. Die Anzahl der Spalten bezieht sich auf Zeichen. Das bedeutet 1 Zeichen=1 Spalte.
-
wrap="virtual" oder wrap="physical"
Normalerweise werden bei einem Textfeld keine Zeilenumbrüche übertragen, es sei denn, der Benutzer hat sie selbst eingegeben. Auch findet bei der Texteingabe durch den Benutzer am Zeilenende nicht automatisch ein Zeilenumbruch statt. Mit dem Attribut wrap kann erreicht werden, dass die Zeile am Zeilenende automatisch umgebrochen wird.
Die Angabe wrap="virtual" führt dazu, daß der Text am Zeilenende umgebrochen wird. Der vom Benutzer eingegebene Text wird allerdings weiterhin ohne Zeilenumbrüche an den Server übertragen. Über die Zuweisung wrap="physical" werden die Zeilenumbrüche mit an den Server übertragen. Das heißt der Text wird genauso zum Server übertragen, wie der Benutzer ihn am Bildschirm eingibt.
Mit Bild
Beispiel: Mehrzeilige Textfelder
Klicken Sie hier, und sehen Sie zwei mehrzeilige Textfelder. Beide sind gleich groß und unterscheiden sich nur dadurch, dass im zweiten bei der Texteingabe durch den Benutzer ein automatischer Zeilenumbruch stattfindet. Das wird durch den Einsatz des Attributs wrap="virtual" erreicht.
Mit Bild
Der HTML-Code sieht folgendermaßen aus:
Mit Bild
<form method="POST"> <p><textarea name="kommentar1" rows="3" cols="32"></textarea></p> <p><textarea name="kommentar2" rows="3" cols="32" wrap="virtual"></textarea></p> </form>
Mit Bild
Der dargestellte HTML-Code zeigt den relevanten Teil des Beispiels, auf die Darstellung der Ihnen schon bekannten Tags wie <head>, <body>, <title> usw. haben wir verzichtet.