Neue Input Typen in HTML5

Mit HTML5 ist es möglich Formulare effizienter zu gestalten, indem man den Eingabefeldern bestimmte Typen zuweist. Mit Hilfe dieser Typen kann man beispielsweise bestimmen, dass bestimmte Felder nur Zahlen enthalten dürfen, oder ein Datum eingetragen werden soll. Neben den bisher bekannten Typen, wie „text“ oder „password“ können nun auch Typen, wie z.B. „date“ verwendet werden. Die Einbindung sieht folgendermaßen aus:

<input type=“date“ name=“Geburtstag“>

Funktionen der Input Typen

Der date-Typ sorgt dafür, dass in ein Eingabefeld ein Datum eingegeben wird. Die einzelnen Zahlen können durch einen Klick auf die kleinen Pfeile rechts im Inputfeld erhöht, bzw. verringert werden. Wenn man auf den großen schwarzen Pfeil klickt, öffnet sich ein kleiner Kalender, in dem man den gewünschten Tag manuell auswählen kann.
Der datetime-Typ verhält sich sehr ähnlich. Mit diesem Input Typ können Sie ebenfalls das Datum in einem Kalender auswählen und zusätzlich noch die Zeit in dem Feld daneben mittels den Pfeilen einstellen. Außerdem wird die Zeitzone mit angegeben.
Auch der datetime-local-Typ ist vergleichbar. Er unterscheidet sich zum datetime-Typ nur in dem Punkt, dass es hierbei keine Zeitzone gibt.

Mit dem month-Typ ist es möglich Monat und Jahr einzutragen. Mit einem Klick auf den großen Pfeil öffnet sich der Dialog, in dem das Jahr und der entsprechende Monat gewählt werden kann.
Eine ähnliche Funktion bietet der week-Typ. In dem Dialog, der sich öffnet, wenn auf den großen Pfeil geklickt wird, kann man eine beliebige Kalenderwoche eines beliebigen Jahres auswählen.

Eine vermutlich sehr häufig genutzter Typ ist der email-Typ. Ist in dem Feld keine E-Mail-Adresse eingetragen, aber das Formular wird trotzdem abgesendet erscheint automatisch eine Meldung, dass eine E-Mail-Adresse eingegeben werden soll.

Der tel-Typ sorgt dafür, dass auf Mobilen Geräten zu diesem Input Feld nur eine Zahlentastatur erscheint, um die Bedienung zu erleichtern.

Der url-Typ Prüft, ob die Eingabe eine eine gültige URL ist. Die Eingabe wird nur akzeptiert, wenn eine vollständige URL eingegeben wurde. Ein Beispiel hierfür wäre http://www.till.de

Der search-Typ generiert ein „normales“ Eingabefeld mit dem Unterschied, dass es am Ende des Feldes einen Button gibt, der den Suchbegriff wieder entfernen kann.

Der number-Typ sorgt dafür, dass in das Input Feld nur Zahlen eingegeben werden können. Wenn keine Zahl eingegeben wird, wird beim Absenden des Formulars automatisch eine entsprechende Nachricht ausgegeben. Zusätzlich kann man hierbei auch eine Mindest- und Höchstgrenze angeben. Dadurch kann man mit den Pfeilen nur Zahlen zwischen diesen beiden Werten erreichen.

Beim range-Typ wird ein Schieberegler generiert, mit dem der Nutzer einen bestimmten Wert auswählen kann.

Mit color-Typ ist es möglich spezifische Farben zu wählen. Bei einem Klick auf das Eingabefeld öffnet sich ein kleines Fenster, in dem man die gewünschte Farbe auswählen kann.

Leider unterstützen bislang nicht alle Versionen aller Browser diese Input Typen. Wenn diese Input Typen von Ihrem Browser nicht unterstützt werden, werden diese als „normale“ Eingabefelder dargestellt.

Folgende Tabelle zeigt, welche Typen von welchen Browsern unterstützt werden: