HTML5 Formulare, Input-Typen und Attribute

Wichtig: HTML5 ist immer noch im Entwicklungsstatus, die meisten Browser können mit den neuen Elementen und Attributen wenig anfangen. Mit den aktuellen Versionen von Opera und Chrome bekommt man wenigstens einen kleinen Vorgeschmack, was in der neuen HTML Version wirklich steckt, auch die Windows-Version des Safari Browsers unterstützt noch lange nicht alle neuen Funktionen.

Bei der Weiterentwicklung der Formular-Technik wurde die bereits sehr ausgereifte Spezifikation Web Forms 2.0 in HTML5 integriert, die einige Neuerungen bietet:

Definierte Eingabetypen beispielsweise für Internetadressen, Emailadressen, Datum und Zeitangaben, Zahlenwerte, etc. - Die Prüfung auf syntaktische Korrektheit kann dann vom Browser übernommen werden, wobei natürlich alle eingehenden Daten vom Backend wie bisher eingehend geprüft werden müssen.
Eingabefelder können als Pflichtfelder definiert werden
Dynamische Eingabefelder mit der Möglichkeit, weitere Felder hinzuzufügen
Sinnvolle Attribute wie autocomplete (an/aus) oder required für Formularfelder
Reguläre Ausdrücke (Regex) sowie "Ranges" (min/max) für Eingabefelder

Wichtig: Auch wenn HTML5 eine Fehlerbehandlung direkt im Dokument ermöglich, muss jede Eingabe zusätzlich serverseitig validiert werden!

Definierbare Eingabetypen

Datentyp für Emailadresse(n)

<input type="email">

Datentyp für URLs

<input type="url">

Datentypen für numerische Eingaben

<input type="number"> Ein numerischer Wert wird erwartet

<input type="range" min="10" max="100" step="5" value="55"> Min / Max in 5er Schritten auswählbar

Datentyp für Datumsangaben

<input type="day">

<input type="month">

<input type="year">

<input type="datetime"> Jahr, Monat, Tag, Stunde, Minute, Sekunde und Millisekunde nach UTC (Weltzeit)

<input type="date"> Jahr, Monat, Tag ohne Zeitzone

<input type="week">

<input type="time"> Stunde, Minute, Sekunde und Millisekunde ohne Zeitzone

Input Type Search

Einzeiliges Eingabefeld für Suchanfragen mit History-Funktion
Dieses Input-Feld hat in jedem Fall Potential, man darf gespannt sein, wie die einzelnen Browser die jeweiligen Elemente umsetzen werden.

<form action="https://www.google.com/search" method="get">

 <label>

  Google:

  <input type="search" name="q">

 </label>

 <input type="submit" value="Suchen">

</form>

Input Type Color

Datentype für Farben in sRGB 8-bit
Möglich wäre die Auswahl einer bestimmten Farbe mit Hilfe einer Farbtabelle ohne umständliche Eingabe eines Farbwertes.

<input type="color">

Alle Inputelemente sowie eine Tabelle mit allen möglichen Attributen zu den einzelnen Elementen findet man auf der aktuellen HTML5 Working Draft der WHATWG Community.

CSS3 Special Zur Startseite HTML5 - Geänderte Elemente