Formulare in HTML 5

Eine weitere, für  Webentwickler sehr spannende, Erneuerung, die in HTML5 einzug hält sind die neuen Möglichkeiten / Erleicherungen in den Formularen. Bisweilen war es immer so, dass E-Mails etc. mit Javascript und CSS aufwendig überprüft und angezeigt werden musste. Dies ist nun anders in HTML5.

Mit HTML5 erhalten Input-Felder viele neue Attribute und Typen in HTML. Das klingt zugegener Weise ersteinmalso spannend wie eine neue Finanzkrise in Europa. Aber dem ist mit nichten so.So gibt es nun Beispielsweise die neuen Eingabefelder-Typen ( Input-Types) in HTML5. Sonst war es ja immer so, dass der Webentwickler normale Texteingabefelder definiert hat für E-Mails-Eingaben und Co. und anschließend wurden die Eingaben mit Javascript in Echtzeit aufwendig überprüft. Dieses aufwendige Ärgernis nimmt sich nun der neue HTML-Standart an.

Man kann nun einen Eingabefeld in einem Formular den Typ "email" zuweisen. Beim Absenden dieses Feldes wird nun vom Browser via HTML5 die vom Benutzer eingegebene E-Mail auf Richtigkeit überprüft. Es gibt auch weitere Typen, wie url für einen Link, date für ein Datum, color für eine Farbangabe, number für eine normale Nummer, fon für eine Telefonnummer und vieles mehr. Abgesehen davon, dass die einzelnen Eingabefelder entsprechend Ihrer Aufgabe bereits schön vorformatiert werden, der Webentwickler muss ich nicht mehr via Javascript darum kümmern diese Eingaben vom Benutzer auf Richtigkeit zu überprüfen. Das übernimmt nun der Browser bequem für ein.  Zudem stellt der jeweilige Browser Hilfsmöglichkeiten zur Verfügung, die die jeweilige Eingabe im gewünschten Format übernimmt. So wird Beispielsweise bei einem Eingabefeld für ein Datum (date) bei dem Desktop-Webbrowser Opra ein kleiner Kalender angezeigt, über dem der Benutzer das gewünschte Datum durch klicken auswählen kann. Beim Safari im iOS wird ein unverschämt schöner Spinner für die Datumsauswahl zur Verfügung gestellt und dem Benutzter angezeigt.

Neu sind auch einige Attribute, die man nun den Eingabefeldern zuordnen kann. So gibt das Attribute "required" dem Benutzer vor, dass dieses Feld Aufgefüllt werden muss. Lässt er dieses nun leer, so wird bei der Überprüfung beim Versuch das Formular abzuschicken eine Mitteilung vom Browser generiert, dass dieser doch bitte dieses Feld zu befüllen hat. Dieses Funktioniert ebenfalls bei Auswahlboxen (Select). Gibt man hier eine Auswahl vor mit dem Inhalt (value) nichts ( "" ) , so reagiert der Browser ebenso wie bei einem Eingabefeld, dass mit dem Attribute ausgewählt wurde und verweigert das Abschicken des Formulars, bis dieses Feld entsprechend ausgewählt wurde. Hinzu kommen viele weitere Attribute, die ich im einzelnen jetzt nicht nennen möchte / kann. Auf ein besonderes möchte ich allerdings noch eingehen. So gibt es nun das Attribute "pattern", welches es dem Entwickler ermöglicht für Texteingabefelder und Co. die Form des Textes zu bestimmen mitteln regulären Ausdrücken (regular expressions). So kann man z.B. in den Pattern-Attribute angeben, dass in diesem Eingabefeld nur Zahlen und Großbuchstaben verwendet werden dürfen. Sollte sich der Anwender nicht an dieses Vorgabemuster an Eingabemöglichkeiten halten, so gibt der Browser eine Warnung aus, dass man sich bitte an das Vordefinierte Eingabemuster zu halten hat.

Eine weitere tolle Erneuerung ist in meinen Augen die Datenliste, die nun mit dem neuen HTML eingeführt wird.  Diese ermöglicht es , ähnlich wie bei einer Auswahlliste (select-Box) den Benutzer bei Eingabefeldern Eingabemöglichkeiten anzubieten. So kann man Beispielsweile ein Eingabefeld mit dem Typ "search" ausstatten und ihm eine Liste mit Benutzern der Webplattform anhängen. Nun kann der Benutzer seine Eingabe tätigen und bekommt beim schreiben Benutzer der Webplattform angeboten. Diese muss er allerdings nicht nehmen, es bleibt ihm die Möglichkeit auch neue Namen zu schreiben, die bereits noch nicht existieren.

Hier ein Beispiel:

Ergebnis:

<input type="search" list="country_code" placeholder="Ländercode eingeben" pattern="[A-Z]{2}"  name="country_code" required />

<datalist id="country_code">

  <option value="DE">Deutschland</option>

  <option value="AT">Österreich</option>

</datalist>

Es wurde ein Sucheeingabefeld dem Benutzer zur Verfügung gestellt, indem dieser ein Ländercode eingeben kann zum  suchen. Ihm wird im Feld der Hinweis vordefiniert gegeben "Ländercode eingeben". Hierbei muss er nicht die Codes kennen. Gibt dieses sofort CH ein, so kann dies gewertet werden. Möchte er allerdings Deutschland eingeben und weiß den Code nicht, so kann der Deutschland eingeben und ihm wird bereits während der Eingabe Deutschland als Vorschlag angezeigt. Klickt er diesen Eintrag an, so wird in das Eingabefeld "DE" eingetragen, also der Value-Inhalt des Vorschlages. Sollte der Benutzer "Zypern" eingeben, so erhält er eine Warnung, da via Pattern angegeben wurde, dass die Eingabe in das Feld nur 2 Zeichen betragen darf und nur Großbuchstaben enthalten darf.  Sollte der Benutzer das Formular abschicken wollen, ohne eine Eingabe gemacht zu haben, so wird er Aufgefordert dieses Feld zu befüllen, dass dieses Feld als required steht, als Notwenig ist.

Fazit: Die Formularfeatures geben einen Webentwickler tolle Möglichkeiten die Formulare bequem über den Browser validieren zu lassen. Dieses Feature hat allerdings noch seine Macken in einigen Browsern und nicht alle Attribute und Typen werden konform von allen Browsern zur Verfügung gestellt. Daher ist dieses Feature nur mit Vorsicht zu bisher zu genießen.

Sollten Sie Fragen zu HTML5 und den Möglichkeiten haben oder ein Webprojekt planen und hierbei Hilfe benötigen, so Fragen Sie einfach und unverbindlich bei uns einfach an.