Formulare in Webseiten

Die folgende Aufzählung enthält die wichtigsten Elemente, die in einem Formular definiert werden können - jeweils mit einem Beispiel, dem zugehörigen Tag und einer kurzen Beschreibung. Der Tag für die meisten Formularelemente heisst <input>. Mit dem Attribut type wird die Art des Formularelements festgelegt, über den Namen (Attribut name) können Formularelemente referenziert werden (Variablenname). Alle anderen Attribute sind nicht immer notwendig und können auch weggelassen werden (siehe dazu die jeweilige Beschreibung).

Eingabefelder

Einzeiliges Textfeld

<input name="ihr_name" type="text" value="Julius" size="30" maxlength="40">

Das am häufigsten verwendete Formularelement. Breite des Eingabefelds (size) und maximale Länge der einzugebenden Zeichenkette (maxlength) können ebenfalls angegeben werden. Mit value kann ein Anfangswert gesetzt werden.

Passwortfeld

<input name="ihr_pwd" type="password" value="julius">

Ein Passwortfeld ist ebenfalls ein Textfeld. Eingegebener Text wird jedoch nicht explizit sondern maskiert (durch Sternchen) dargestellt, sodass mitlesende Personen das Passwort nicht auf dem Bildschirm sehen können. Im Beispiel wurde der Wert der Variablen ebenfalls mit "julius" vorbelegt. ACHTUNG: Die Übertragung eines Passwortfeldes aus einem Formular erfolgt trotzdem im Klartext!

Mehrzeiliges Textfeld

<textarea name="textarea" cols="40" rows="3">Ich war von der gebotenen Vorstellung mehr als begeistert!
Der Hauptdarsteller überzeugte nicht nur durch...</textarea>

In eine textarea kann der Benutzer längeren Text eingeben. Üblicherweise werden Breite (cols) und Höhe (rows) des Textfeldes angegeben. Durch die Breiten- und Höheneingabe ist nur die optische Größe des Textfeldes beschränkt, nicht die Länge des eingegebenen Textes. Übersteigt die Länge des Textes diese angegebenen Maße, so geben die meisten Browser Scrollbalken am Rand des Textfeldes an. Soll das Textfeld vorbelegt werden, so wird der Text zwischen Beginn- und End-Tag gesetzt.

Auswahlelemente

Zum Unterschied von den Eingabeelementen kann der Benutzer hier keine eigenen Angaben eintippen, sondern aus vorgegebenen Werten auswählen. Je nach Element ist auch Mehrfachauswahl zulässig.

Auswahllisten

Auswahllisten werden durch den Tag <select> dargestellt. Dabei können zwei Varianten unterschieden werden:

Selectfelder

Montag Dienstag Mittwoch Donnerstag Freitag Samstag Sonntag

<select name="liste1" size="7" multiple>
<option value="1" selected>Montag</option>
<option value="2">Dienstag</option>
<option value="3">Mittwoch</option>
<option value="4">Donnerstag</option>
<option value="5">Freitag</option>
<option value="6">Samstag</option>
<option value="7">Sonntag</option>
</select>

Hier handelt es sich um eine mehrzeilige Liste, die mehrere Auswahlmöglichkeiten bietet. Durch das Attribut multiple wird auch Mehrfachauswahl (durch drücken der Strg-Taste) zugelassen. Size gibt die Anzahl der angezeigten Zeilen an. Falls mehr Einträge als Zeilen vorhanden sind, wird ein Scrollbalken hinzugefügt. Die einzelnen Auswahlmöglichkeiten werden mit dem <option>-Tag angegeben; ein Attribut selected bewirkt hier, dass der Eintrag vorausgewählt wird. Wenn das Formular abgeschickt wird, so werden - sofern angegeben - die Werte (value) der ausgewählten Einträge oder deren Wortlaut übergeben.

Drop-Down-Listen

Montag Dienstag Mittwoch Donnerstag Freitag Samstag Sonntag

<select name="liste2">
<option selected>Montag</option>
<option>Dienstag</option>
<option>Mittwoch</option>
<option>Donnerstag</option>
<option>Freitag</option>
<option>Samstag</option>
<option>Sonntag</option>
</select>

Wird für ein Selectfeld die Höhe 1 angegeben (oder die Höhenangabe weggelassen) und keine Mehrfachauswahl ermöglicht, so entsteht eine sog. Drop-Down-Liste.

Radio-Buttons

<input type="radio" name="ihre_anrede" value="Frau">Frau<br>
<input type="radio" name="ihre_anrede" value="Herr">Herr<br>
<input type="radio" name="ihre_anrede" value="Firma">Firma

Eine ähnliche Funktion wie Auswahllisten ohne Mehrfachauswahl erfüllen Radio-Buttons. Hier kann der Benutzer aus einer Aufzählung genau einen Wert auswählen. Radio-Buttons haben den Input-Typ radio. Durch Verwendung eines gemeinsamen Namens wird eine Gruppe gebildet, aus der der Benutzer einen Eintrag auswählen kann. Beim Abschicken des Formulars wird der Wert (value) dieses Eintrags übertragen.

Check-Boxen

<input type="checkbox" name="meine_hobbies" value="Reisen">Reisen<br>
<input type="checkbox" name="meine_hobbies" value="Sport">Sport<br>
<input type="checkbox" name="meine_hobbies" value="Lesen">Lesen<br>
<input type="checkbox" name="meine_hobbies" value="Computer">Computer

Mit dem Input-Typ checkbox werden Checkboxen definiert. Checkboxen mit gleichem Namen bilden wieder eine Gruppe. Im Unterschied zu den Radio-Buttons können hier auch mehrere Einträge ausgewählt werden. Die Werte (value) der Einträge werden als Formulardaten übertragen.

Schaltflächen

Submit-Button

<input type="submit" name="Submit" value="Abschicken">

Der Submit-Button ist wohl das wichtigste Formularelement, ohne den das Formular nicht verarbeitet werden kann. Schaltflächen zum Abschicken haben den Input-Typ submit. Das Attribut value bestimmt den angezeigten Text in der Schaltfläche und ist frei wählbar. Je nach aufgerufener Funktionalität kann er auch "Anmelden", "Mail abschicken", "Suchen" o. ä. lauten. Durch drücken des Submit-Button wird die action, die für das Formular festgelegt wurde, ausgeführt.

Reset-Button

<input type="reset" name="Reset" value="Zur&uuml;cksetzen">

Auch für das Löschen aller bisherigen Formulareingaben (setzen auf den Ursprungszustand) wurde eine Schaltfläche vordefiniert, nämlich der Input-Typ reset. Auch hier ist der angezeigte Text beliebig wählbar.