Die neuen Formularelemente von HTML5 sind nicht nur für den Besucher einfacher zu benutzen, sie bieten zusätzlich auch einen deutlichen Mehrwert für Entwickler. So kann man durch die neuen Datum- oder E-Mail-Felder auf eine umständliche Validierung der Eingaben verzichten.
Generell unterscheiden sich die verschiedenen neuen Eingabetypen allerdings in ihrem aussehen.
Dank HTML5 steht nun auch ein extra Eingabefeld für E-Mail Adressen bereit. Dies ist wie folgt definiert:
<input type="email"></input>
Zahlen
HTML5 bietet auch spezielle Eingabefelder für Zahlen und Nummern.
<input type="number"></input>
Telefonnummern
Neu hinzugekommen ist auch ein Feld zur Eingabe von Telefonnummern.
<input type="tel"></input>
Datum und Zeit
Mit dem Datumtyp können Eingaben in Form von Datum und Zeit erfolgen. Dabei stehen folgende zur Auswahl:
Zeit
<input type="time"></input>
Datum
<input type="date"></input>
Monat
<input type="month"></input>
Woche
<input type="week"></input>
Datum & Zeit
<input type="datetime"></input>
Datum & Zeit + Zeitzone
<input type="datetime-local"></input>
Suche
HTML5 bietet auch speziell für die Suche einen Inputtyp.
<input type="search"></input>
Vorschläge
Um Vorschläge z.B. bei der Suche anzuzeigen, gibt es neuerdings das <datalist> Tag.
<input type="search" list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist>
Dabei wird mit Hilfe des Attributs list eine Verbindung zu der datalist hergestellt. Dies ist auch vom label Tag bekannt.
Hier könnte man mit Hilfe von JavaScript, AJAX und PHP eine jeweils aktualisierte Liste während der Eingabe bereitstellen.
URLs
Auch für URLs wurde ein eigener Eingabetyp eingeführt. Dieser lässt sich über
<input type="url"></input>
ansprechen.
Neue Attribute
In HTML5 sind nicht nur neue Eingabetypen hinzugekommen, bestehende und neue wurden auch um einige nützliche Attribute erweitert.
autocomplete
Mit diesem Attribut lässt sich die Autovervollständigung kontrollieren. Es akzeptiert die Werte on und off. Standardmäßig steht es auf on.
autofocus
Ist dieses Attribut auf "", "autofocus" oder ohne sämtliche Werte gesetzt, so wird dieses Eingabefeld nachdem die Seite fertig geladen ist fokusiert.
disabled
Dieses Attribut kann ebenfalls die Werte "", "disabled" annehmen oder ohne Wert initialisiert werden. Es bewirkt, dass ein Eingabefeld nicht aktiv, also gesperrt bzw. grau hinterlegt ist.
required
Dieses Feld kann ebenfalls leer (""), mit "required" oder ohne Wert initialisiert werden. Mit diesem Attribut ist es möglich die Eingabe zu erzwingen, d.h. das Feld muss ausgefüllt werden und darf nicht leer sein.
Fazit
Formulare bekommen in HTML5 eine völlig neue Bedeutung. Die Eingabefelder sind nun speziell auf den jeweiligen Datentyp angepasst. Der Ballast an unnötigem JavaScript zur Validierung entfällt. Es bleibt zu hoffen, dass die neuen Funktionen auch von allen Browsern unterstützt werden, andernfalls macht deren Verwendung wenig Sinn.
Leave a comment