HTML5 und CSS3 - Formulare

In diesem Artikel wird der Einsatz der neuen Formularelemente in HTML5 näher beschrieben.

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.

E-Mail

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.