Neben den bisher vorgestellten Dokument-Elementen können in HTML-Dateien auch Eingabe-Elemente in Formularen definiert werden. Formulareingaben können, wie wir später sehen werden, mit Programmen auf dem Webserver oder auch mit Javascript im Webbrowser verarbeitet werden. Zunächst lernen wir jedoch kennen, wie Formulare definiert werden und welche die wichtigsten Eingabe-Elemente sind.
Ein Formular wird in HTML mit dem Tag form definiert. Innerhalb
des form-Tags dürfen beliebige andere HTML-Elemente stehen,
insbesondere auch Elemente für Benutzereingaben.
Das einfachste Element zur Eingabe ist ein Texteingabefeld, das
wir mit einem input-Tag definieren können, deren type-Attribut
den Wert "text" hat:
<form>
<input type="text" name="message">
</form>
Das Attribut name gibt an, unter welchem Namen der eingegebene Text
beim Absenden des Formulars übermittelt werden soll. Das input-Tag
hat keinen Inhalt und braucht kein schließendes Tag.
Zur Übermittlung der eingegebenen Daten fügen wir dem Formular einen
entsprechenden Knopf hinzu. Diesen können wir mit dem input-Tag und
dem Wert "submit" für das type-Attribut definieren.
<form>
<input type="text" name="message">
<input type="submit">
</form>
Beim Druck auf den Submit-Knopf wird die HTML-Seite neu geladen,
wobei die Formulareingaben der URL als sogenannter Query-Parameter
angehängt werden. Dieser wird der URL nach einem Fragezeichen
angehängt und könnte zum Beispiel ?message=Hallo lauten, wenn ein
Benutzer den Text Hallo in das Eingabefeld eingibt und dann auf den
Submit-Knopf drückt.
Bei komplexeren Formularen können strukturierende HTML-Elemente wie Tabellen verwendet werden, um die Eingabefelder anzuordnen.
Neben Texteingabefeldern können wir auch Auswahllisten definieren,
mit denen unter vorgegebenen Texten gewählt werden kann. Auswahllisten
werden mit dem Tag select definiert, wobei jede Option durch ein
option Tag angegeben wird. Die folgende Auswahlliste erlaubt zum
Beispiel die Angabe der Priorität einer Nachricht.
<select name="priority">
<option value="indifferent">egal</option>
<option value="important">wichtig</option>
<option value="urgent">dringend</option>
</select>
Das Attribut name definiert wieder den Namen, unter dem die gewählte
Option übermittelt wird. Die value-Attribute der option-Tags
werden als Wert der Eingabe mit dem gegebenen Namen priority
übermittelt, wenn die entsprechende Option vor Absenden des Formulars
ausgewählt wurde. Eine mögliche Eingabe bei Auswahl der letzten Option
wäre also priority=urgent.
Statt mit einer Auswahlliste können wir vorgegebene Eingaben auch mit
Hilfe sogenannter Radiobuttons definieren. Dieser werden als
input-Tags angegeben, deren type-Attribut den Wert "radio"
hat. Radiobuttons werden von Webbrowsern in der Regel als klickbare
Kreise dargestellt.
<ol>
<li>
<input type="radio" name="priority" value="indifferent"> egal
</li>
<li>
<input type="radio" name="priority" value="important"> wichtig
</li>
<li>
<input type="radio" name="priority" value="urgent"> dringend
</li>
</ol>
Hier verwenden wir eine geordnete Liste, um die Optionen anzuordnen. Da Radiobuttons von sich aus keinen anzuzeigenden Text enthalten fügen wir entsprechende Beschriftungen nach jedem Radiobutton ein. Alle Radiobuttons mit demselben Namen werden zu einer Gruppe von Optionen zusammengefasst, von denen nur höchstens eine ausgewählt werden kann. Die übermittelten Daten entsprechen hier also denen, die auch bei der vorherigen Auswahlliste übermittelt würden.
Schließlich können wir auch noch Checkboxen definieren, die als kleine Kästchen dargestellt werden, in denen Häkchen gesetzt werden können.
<input type="checkbox" name="confirmation">
Dieses Element definiert eine Checkbox, die, wenn ein entsprechendes
Häkchen gesetzt wird, beim Absenden des Formulars als
confirmation=on übermittelt wird.
Im folgenden Kapitel werden wir sehen, wie wir Formulareingaben aus den hier definierten Elementen mit Javascript im Browser verarbeiten können.