Schönere Formulare mit HTML5

So langsam wird HTML5 von allen gängigen Browsern unterstützt so das man es mittlerweile gut verwenden kann. Der Internet Explorer 9 oder älter hat damit zwar noch seine Probleme, aber alle anderen aktuelle Browser unterstützen HTML5 mittlerweile weitestgehend. Wo man früher oft aufwändiges Javascript benutzt hat um dem Benutzer das eingeben von Daten in Formulare zu erleichtern kann man jetzt in vielen Fällen HTML5 verwenden was die Arbeit deutlich vereinfacht und den Code schön schlank hält. Die neuen Eingabefelder vereinfachen die Eingabe der vorgegebenen Daten nur und erzwingen sie nicht. Man muss also trotzdem noch Serverseitig prüfen ob die Daten im richtigen Format beim Server ankommen.

<input type="number" name="number" min="1" max="5000">

<input type="range" name="range" min="0" max="10">

<input type="date" name="date">

<input type="month" name="month">

<input type="week" name="week">

<input type="time" name="time">

<input type="datetime" name="datetime">

<input type="datetime-local" name="datetime-local">

<input type="color" name="favcolor" value="#ff0000">

<input type="email" name="email">

<input type="url" name="url">

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

<input type="tel" name="tel">

Ergebnis anzeigen

Mit dem "output" Tag kann man das Ergebnis einer Rechnung in Formularen anzeigen. Dazu werden 2 Formularfelder benötigt in die jeweils eine Zahl eingegeben werden kann. Im "form" Tag kann über das Attribut "oninput" angegeben werden wie gerechnet werden soll.

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" id="a" value="50">
  +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>

Beispiel:

Datalist

Mit dem neuen Tag "datalist" lassen sich Daten für ein Formularfeld vorgeben. Man erhält damit eine Mischung aus einem normalen Textfeld in das man beliebigen Text eingeben kann und einem herkömmlichen "select" aus dem man vorgegebene Daten auswählen kann.

<input list="browsers" name="browser">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Keygen

Das Keygen Element kann zum erzeugen von Schlüsselpaaren zur sicheren Datenübertragung genutzt werden. Der Browser erstellt dabei ein Schlüsselpaar aus einem privatem und einem öffentlichen Schlüssel"Signed Public Key and Challenge" (SPKAC). Der private Schlüssel bleibt im Speicher des Browsers, der öffentliche Schlüssel wird mit dem restlichen Formular an den Server gesendet. Die Daten aus dem Formular werden nicht verschlüsselt übertragen.

<keygen name="key">

Datei Upload für Smartphones

Mit dem "capture" Attribut kann bei einem Upload Feld angegeben werden das die Kamera bzw. der Soundrecorder des Smartphones gestartet werden soll, die Hochzuladende Datei wird somit erst beim Klick auf das Formularfeld erstellt. Über das "accept" Attribut wird angegeben ob man ein Bild, Video oder eine Audio Datei haben möchte.

Zum upload von Audio Dateien:

<input type="file" name="audio" accept="audio/*" capture>

Beispiel:

Zum upload von Bildern:

<input type="file" name="image" accept="image/*" capture>

Beispiel:

Formularfelder validieren

Für Formularfelder gibt es mit HTML5 auch neue Attribute die es ermöglichen das die Eingabe wie bei dem E-Mail Feld schon vor dem absenden vom Browser überprüft werden. Auch hier gilt das es sich lediglich um eine Überprüfung in Browsern die das unterstützen handelt, die Eingaben müssen also auf jeden Fall nochmal auf dem Server geprüft werden.

Required

Das Attribut ist mein absoluter Liebling, damit kann man angeben das ein Formularfeld ausgefüllt werden muss bevor das Formular abgesendet werden kann.

<input type="text" name="text" required>

Beispiel:

Pattern

Pattern ist auch ganz nett, damit kann man eine Regex angeben die für das Formularfeld gültig ist. Zusätzlich muss das Title-Attribut angegeben werden in dem man für den Benutzer verständlich erklärt was er eingeben muss. Außerdem sollte man es nur mit "required" verwenden da sonst leere Eingaben möglich sind.

<input type="text" name="text" pattern="[A-Za-z]{4}[0-9]{2}" title="4 Buchstaben gefolgt von 2 Zahlen." required />

Beispiel:

Validierung verhindern/hervorheben

Wenn man aus irgend einem Grund doch nicht möchte das die Eingaben validiert werden kann man mit "formnovalidate" die Validierung durch den Browser verhindern.

<input type="submit" value="Senden" formnovalidate />

Wenn man möchte das alle Felder die noch keine gültigen Angaben enthalten hervorgehoben werden kann man das per CSS mit :invalid{...} machen, mit :required{...} kann man alle Felder hervorheben die eine Eingabe benötigen.