HTML lernen (3): Formulare einbinden

Einzeilige Textfelder

∅ 3.2 / 5 Bewertungen

Einzeilige Textfelder

50143_textfeld.gif

Ein einzeiliges Textfeld.

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.

Gültige Attribute

Für die Darstellung bzw. Gestaltung von Textfeldern stehen die folgenden Attribute zur Verfügung:

  • 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.

Beispiel: Einzeiliges Textfeld

Beispiel: Einzeilige Textfelder

Klicken Sie hierAnzeigen 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

Der HTML Code für die Textfelder:

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

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.