HTML-Formulare

In diesem Kapitel schauen wir uns HTML5 Formulare an, die man ausfüllen und zu einem Server senden kann.

Alle Formularelemente, die zum Server gesendet werden sollen, müssen sich in einem form-Element befinden.
Das form-Element hat zwei wichtige Attribute:
Das Attribut "action" erhält als Wert eine URL, an welche beim Klicken auf den submit-Button Daten gesendet werden.
Dadurch wird ein HTTP-Request ausgelöst.
In den meisten Fällen wird das Attribut die URL eines Skriptes enthalten, mit welchem auf dem Server die Formulareingaben ausgewertet werden.
"method" legt mit get als Standardwert oder mit post die HTTP-Methode fest, mit der die Daten gesendet werden.
In diesem ersten Formular sehen Sie zwei Buttons. Der Button vom Typ Reset setzt alle Eingaben zurück. Der Submit-Button löst den Sendevorgang aus.

Mit dem Input-Element erzeugen Sie Elemente innerhalb des Formulars, beispielsweise Buttons, Textfelder, Auswahlfelder und so weiter.

HTML-fünf bietet eine Vielzahl von neuen Eingabe-Typen für die Eingabe von Zahlen.
Bei mobilen Geräten wird dann ein Nummernfeld eingeblendet, das die Eingabe erleichtert.

HTML-fünf bietet eine Vielzahl von neuen Eingabe-Typen für Datums- und Zeitangaben.
Bei mobilen Geräten wird dann ein Datumsfeld oder sogar der Kalender eingeblendet, was die Eingabe erleichtert.
Mit input typ "date" können Sie Datumseingaben abfragen.

Es gibt einige spezifische Input-Typen, wie zum Beispiel tel, date, datetime-local, week, month und so weiter.
Diese sind nicht in jedem Browser implementiert und können daher Probleme verursachen.
In der Regel ersetzen Browser Input-Typen, die sie nicht kennen, mit dem Input-Typ text, die Funktionalität bleibt so erhalten.
Wird dennoch ein spezifisches Eingabeformat benötigt, muss dies zum Beispiel mit JavaScript erneut geprüft werden.

Radio-Buttons sind eine Gruppe von beschrifteten meist runden Knöpfen, von denen der Anwender einen auswählen kann.
Es kann immer nur einer der Radio-Buttons ausgewählt sein.
Folgende Attribute sind möglich:
name: Jeder Radio-Button erhält einen internen Bezeichnernamen. Alle Radio-Buttons, die den gleichen Namen haben, gehören zu einer Gruppe, das heißt von diesen Buttons kann der Anwender genau einen markieren.
Value bestimmt einen internen Bezeichnerwert für jeden Radio-Button. Wenn man das Formular abschickt, wird der Bezeichnerwert des markierten Buttons übertragen.
checked: Wenn Sie eine der Auswahlmöglichkeiten vorselektieren wollen, dann notieren Sie in dem input-Tag des entsprechenden Radio-Buttons das alleinstehende Attribut "checked".

Ein textarea-Element ist ein mehrzeiliges Eingabefeld.
Es dient zum Beispiel der Eingabe von mehrzeiligen Texten, etwa Kommentaren, Forumsbeiträgen oder Benachrichtigungen.
Das textarea-Element kann über die rechte untere Ecke in seiner Größe verändert werden.
Sie können seine Größe aber auch über Attribute oder über CSS festlegen.

Eine Checkbox ist ein ankreuzbares, meist quadratisches Kontrollfeld.
Der Benutzer kann es auswählen oder die Auswahl entfernen.
Die Werte von ausgewählten Checkboxen werden beim Absenden des Formulars mit übertragen.
Es lassen sich auch Gruppen von Checkboxen mit gleichen Namen, was technisch gesehen nur für die Übertragung wichtig ist, da sich Checkboxen auch in einer Gruppe unabhängig voneinander auswählen lassen.
Checkboxen in HTML kennen nur die Zustände ausgewählt und nicht ausgewählt.
Die möglichen Attribute sind identisch zu den Radio-Buttons.

Um die barrierefreie Nutzung von Webseiten zu gewährleisten, sollten alle Formulare sowohl gruppiert als auch ausreichend beschriftet werden.
Zudem wird die anklickbare Fläche vergrößert, wenn Input-Elemente gruppiert werden.

Mit dem fieldset-Element können Elemente innerhalb von Formularen gruppiert werden.
Mit dem legend-Element kann zusätzlich eine Überschrift für das fieldset-Element definiert werden.
Standardmäßig zeichnen die Browser einen Rahmen um das fieldset.
Das legend-Element liegt genau auf diesem Rahmen.

0:00 HTML5-Formular und Form-Element
0:54 Buttons
1:25 Login
2:28 einzeilige Texteingaben
5:13 Zahleneingaben
6:26 Datum und Zeit
7:20 textarea
8:04 Radiobuttons
8:58 Checkbox
9:45 Beschriftung: label
10:13 Gruppen mit fieldset und legend