Forgot your password?

Forgot your username?

All about IT, Web and Development.
By users for users.

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.

Michael Kostka

Fachinformatiker / Systemintegration
Ich schreibe hier regelmäßig zu den Themen Android, Web, Linux und Hardware.

Raspberry Pi Starter Kit
DataCloud

Leave a comment

I have read the privacy policy and agree to electronically store and process my input data to answer the request.