HTML lernen - Formulare - Eingabefelder

Der input-Tag

Es gibt in HTML verschiedene Formularfelder. Alle Formularfelder (bis auf zwei) werden mit dem input-Tag generiert. Dabei legt das Attribut type des input-Tags fest, um welches Formularfeld es sich später handeln wird.
Achtung: Der input-Tag ist einer der wenigen HTML-Codes, der kein Ende hat!

Allgemeine Attribute des input-Tags

Der input-Tag hat einige Attribute, die für alle Feldtypen gleich sind. Diese sind:

• name: Enthält den Namen des Formularfeldes. Jedes Formularfeld muss einen Namen besitzen.
  Achtung: Der Name darf nur einmal im ganzen Formular verwendet werden.
• value: Enthält den Wert der standardmäßig im Formularfeld vorgegeben oder bei einer Auswahl hinterlegt ist.
  Hinweis: Dieses Attribut existiert nicht beim später folgenden Feldtyp textarea.

Einzeilige Eingabefelder

Es gibt in HTML drei verschiedene einzeilige Eingabefelder:

• Normaltext: Bei diesem Feldtyp hat der input-Tag das Attribut type="text". Weitere Attribute dieses Feldtyps sind:
  • maxlength mit der maximal erlaubten Zeichenanzahl für das Feld. Werte sind ganze Zahlen.
  • size für die Breite des Feldes in Zeichen.
    Achtung: Die tatsächliche Textlänge darin wird nur durch maxlength begrenzt!
  Beispiel:

  <input type="text" value="Standardtext" name="feld1" maxlength="100" size="30">

• Passwort / verschlüsselter Text: Bei diesem Feldtyp können Passwörter oder anderer Text, der nur verschlüsselt (durch Punkte oder Sternchen, ist abhängig vom jeweiligen Browser) dargestellt werden soll.
  Achtung: Nach dem Absenden des Formulars wird der Text wieder in lesbaren Buchstaben dargestellt und kann weiterverarbeitet werden.
  Hinweis: Dieser Feldtyp hat die gleichen Attribute, wie der Normaltext, nur der Wert von type ändert sich: type="password"
• Versteckter Text: Dieser Feldtyp erlaubt es ihnen versteckte Daten in das Formularfeld einzufügen und anschließend mitzusenden. Diese Daten sind für den Nutzer des Formulars nicht sichtbar. Nur Sie können damit nach dem Senden z.B. feststellen, um welches Formular es sich handelt, wenn Sie diese Information in einem versteckten Textfeld hinterlegt haben. Dieser Feldtyp hat das Attribut type="hidden".

Mehrzeilige Textfelder

Zum Schreiben längerer Texte mit Absätzen, werden mehrzeilige Textfelder benötigt. Diese sind auf nahezu jeder Website (in Foren, Gästebüchern, Kontaktformularen, usw.) zu finden.

Für das Generieren eines mehrzeiligen Textfeldes gibt es in HTML einen gesonderten Code, den textarea-Tag. Dieser ist ausnahmsweise kein Attribut des input-Tags sondern ein eigenständiger Code.

Der Standardtext eines mehrzeiligen Textfelder wird jede noch nicht, wie bei den einzeiligen Textfeldern im Attribut value untergebracht, sondern steht zwischen dem Anfangs- und Endtag von textarea.

Beispiel:

<textarea name="meintext">Der Text dieses Textfeldes
die 2. Zeile
und die 3. Zeile
...</textarea>

Attribute des textarea-Tags

• name: Wie Sie in dem Beispiel gerade schon gesehen haben, hat auch textarea dieses Attribut, welches zwingend nötig ist.
• cols: Mit diesem Attribut, wir die Breites des Textfeldes in Zeichen angegeben. Werte sind ganze Zahlen.
• rows: Gibt die Anzahl der ohne zu scrollen sichtbaren Zeilen an und ist somit für die Höhe des Textfeldes verantwortlich. Werte sind auch hier ganze Zahlen.
  Hinweis: Die hier angegebene Zeilenanzahl dient lediglich der Größe des Textfeldes. Ist der Text, der in das Textfeld soll, länger, erhält das Textfeld automatisch Scrollbalken.
• readonly: Mithilfe dieses Attributes können Sie dem Textfeld einen Schreibschutz geben. Dieses Attribut ist eines der wenigen, welches keinen Wert hat und einfach nur so in den textarea-Tag geschriebene wird.

Beispiel für ein leeres, mehrzeiliges Textfeld mit Schreibschutz:

<textarea rows="7" cols="70" name="kommentar" readonly></textarea>