HTML lernen (3): Formulare einbinden
Einzeilige Textfelder
Einzeilige Textfelder
Auf dieser Seite
Mit Bild
Ein einzeiliges Textfeld.
Mit Bild
Für Textfelder stehen mehrere Attribute zur Verfügung, mit denen sie genau definiert werden können. Mit der HTML-Anweisung <input type="text"> wird ein einzeiliges Textfeld definiert.
Mit Bild
Gültige Attribute
Für die Darstellung bzw. Gestaltung von Textfeldern stehen die folgenden Attribute zur Verfügung:
Mit Bild
-
type="text"
Legt als Typ ein einzeiliges Textfeld fest.
-
name="beispiel"
Mit diesem Attribut wird der Variablenname des Textfeldes festgelegt. Diese Angabe ist erforderlich, da ein Element ohne Variablennamen 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.
-
size= "60"
Definiert die sichtbare Länge des Textfeldes. Die Angabe erfolgt in Zeichen.
-
maxlength= "59"
Legt die maximale Länge des Eingabetextes in Zeichen fest.
-
value= "Hilde"
Diese Angabe ist bei einem Textfeld optional. Wird sie verwendet, setzt der Browser im Eingabefeld den in value angegebenen Text ein. Diesen kann der Benutzer jederzeit löschen, ändern und erweitern.
Mit Bild
Beispiel: Einzeiliges Textfeld
Mit Bild
Beispiel: Einzeilige Textfelder
Klicken Sie hier und sehen Sie ein Formular mit zwei einzeiligen Textfeldern.
1. Textfeld
- Als name wird diesem Feld "test1" zugewiesen
- Das Feld ist 20 Zeichen lang.
- Der Anwender darf maximal 15 Zeichen eingeben
2. Textfeld
- Als name wird diesem Feld "test2" zugewiesen
- Als voreingestellter Text erscheint "Guten Tag"
- Das Feld ist 30 Zeichen lang
- Der Anwender darf maximal 30 Zeichen eingeben
Mit Bild
Der HTML Code für die Textfelder:
Mit Bild
<form method="POST"> <p><input type="text" name="test1" size="20" maxlength="15" ></p> <p><input type="text" name="test2" value="Guten Tag" size="30" maxlength="30"></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.