tas2580
Blog über Webentwicklung und Linux Server

Schönere Formulare mit HTML5

tas2580  

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.

Neue Input Typen

In HTML5 gibt es eine ganze Reihe neuer Typen für Input Felder. So kann genauer angegeben werden welche Art Daten man als Eingabe erwartet, der Browser vereinfacht jeh nach Typ die Eingabe. Wenn ein Typ nicht unterstützt wird zeigt der Browser ein herkömmliches Textfeld an.

Weitere Informationen zum input-Tag findest du in der Dokumentation.

Zahlen eingeben

Für Formularfelder die Zahlen erwarten gibt es zwei Möglichkeiten. Die erste Möglichkeit ist geeignet wenn man eine große Spanne an Zahlen erwartet. Die Zweite Möglichkeit eignet sich für einen kleinen Bereich in dem die erwartete Zahl liegen darf.

number

Mit dem Typ "number" kann angegeben werden das eine Nummer erwartet wird, zusätzlich kann ein Minimaler und Maximaler Wert angegeben werden.

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

Beispiel:

range

Mit dem Typ "range" Bekommt der Benutzer einen Schieberegler angezeigt mit dem er eine Zahl zwischen "min" und "max" auswählen kann.

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

Beispiel:


Datum oder Zeit eingeben

Zur Eingabe von Datum und Uhrzeit gibt es eine ganze Reihe an Möglichkeiten. Jeh nach dem wie genau man eine Zeit abfragen möchte kann man den entsprechenden Typ verwenden.

date

Der Typ "date" kann verwendet werden wenn ein komplettes Datum eingegeben werden soll.

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

Beispiel:

month

Der Typ "month" kann verwendet werden wenn ein Monat eingegeben werden soll.

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

Beispiel:

week

Der Typ "week" kann verwendet werden wenn eine Woche eingegeben werden soll.

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

Beispiel:

time

Der Typ "time" kann verwendet werden wenn eine Zeit eingegeben werden soll.

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

Beispiel:

datetime

Der Typ "datetime" kann verwendet werden wenn eine Zeit inclusive Zeitzone eingegeben werden soll. Der Browser öffnet dazu ein Timepicker Feld. Der Typ wird zur Zeit nur von Safari unterstützt.

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

Beispiel:

datetime-local

Der Typ "datetime-local" kann verwendet werden wenn ein Datum und eine Uhrzeit eingegeben werden soll.

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

Beispiel:


Farbe auswählen

Auch zum Auswählen von Farben gibt es einen neuen Typ. Als Ergebnis erhält man einen Hex RGB Farbcode.

color

Mit dem Typ "color" kann man dem Benutzer ermöglichen eine Farbe auszuwählen.

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

Beispiel:


Spezielle Textfelder

Statt Text einfach immer in ein Input Feld mit dem Typ "text" zu schreiben gibt es jetzt für einige Arten spezielle Typen.

email

Der Typ "email" kann verwendet werden wenn eine E-Mail Adresse erwartet wird. Falls der Browser den Typ unterstützt prüft er ob eine valide E-Mail Adresse eingegeben wurde. Smartphones mit Onscreentastatur blenden zusätzlich die ".com" Taste ein.

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

Beispiel:

url

Der Typ "url" kann verwendet werden wenn eine URL erwartet wird. Falls der Browser den Typ unterstützt prüft er ob eine valide URL eingegeben wurde. Smartphones mit Onscreentastatur blenden zusätzlich die ".com" Taste ein.

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

Beispiel:

search

Der Typ "search" kann für Suchfelder verwendet werden. Vom Browser wird es wie ein normales Textfeld behandelt.

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

Beispiel:

tel

Der Typ "tel" kann für verwendet werden wenn eine Telefonnummer als Eingabe erwartet wird. Zur Zeit wird der Typ nur von Safari unterstützt.

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

Beispiel:


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>
Beispiel:

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">
Beispiel:

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.

Über den Autor

tas2580

Weitere Informationen über mich findest du hier.

Ähnliche Beiträge


Kommentare


Kommentar schreiben

URLs werden automatisch umgewandelt.
[b]DEIN TEXT[/b] für Fett gedruckt
[quote]DEIN ZITAT[/quote] für Zitate
[code]DEIN CODE[/code] für Code
captcha