Mit HTML5 stehen vielfältige neue Funktionalitäten wie die Unterstützung für Video-, Audio-Integration, lokalen Speicher und 2D- bzw. 3D-Grafiken zur Verfügung, wo mit HTML 4.01 noch zusätzliche Plugins eingesetzt werden mussten.
Die Erweiterungen für HTML5 mit den zusätzlichen Markup-Elementen und den Erweiterungen für die JavaScript API sind vielfältig und in den Browsern bislang auch noch teilweise sporadisch umgesetzt. 
Nichts desto trotz sollte man gerade nach den Ankündigungen von Microsoft auf der letzten PDC im Rahmen der Präsentation von Windows 8 schon einmal das Augenmerk auf HTML5 richten, da dieser Web-Standard auch wegen den Bemühungen von Google, Facebook und Apple sich eher schnell als langsam durchsetzen wird.
Gerade im Bereich der mobilen Anwendungen ist mit Web-Apps durch den Einsatz von HTML5 und CSS 3 ein Wandel zu plattformübergreifenden Apps zu erwarten. Denn gerade die Unterstützung von diversen Audio-/Video-Features, Sensoren und Touch-Eingabe sind die hervorzuhebenden Merkmale von HTML5. >> mehr…
In diesem Artikel möchte ich nun die neuen Möglichkeiten im Bereich der Input Types und der Validierungen in Web Forms beleuchten. Diese Erweiterungen werden zwar im Gegensatz zu anderen HTML5 Features noch von wenigen Browsern unterstützt, bilden aber zukünftig ein effizientes Mittel um das normale HTML Eingabe Control zu bereichern.
Die neuen Input Types
Mit den neuen Input Types können Eingabefelder mit einer größeren Semantik und bereits implizit definierten Validierungsregeln in HTML5 definiert werden. Gerade durch mobile Browser und Web-Apps können diese Angaben z.B. zum Einblenden eines Software Input Panels verwendet werden (Safari Mobile macht hiervon schon Gebrauch).
- email : E-Mail
- tel : Telefonnummern
- url : URL-Eingaben
- number : Numerische Eingaben
- range : Numerische Eingabe über einen Slider
- Date pickers (date, month, week, time, datetime, datetime-local) : Eingabe von Datums-/Zeitwerten mit Kalenderfunktion
- search : Eingabe von Suchbegriffen
- color : Auswahl von Farben
Außer den neuen Input Types stehen mit HTML5 auch noch neue Attribute für das Input Control zur Verfügung.
Neue Form Attribute:
- autocomplete – Alle Controls der Form besitzen die Autocomplete-Funktion
- novalidate – Für die Form sollen keine Validierungen (siehe unten) erfolgen
Neue Attribute für das Input-Control:
- autocomplete – Control hat Autocomplete Funktion
- autofocus – Control erhält nach dem Laden der Seite den Fokus
- form – Referenzierung der zugehörigen Form
- Überschreiben von form-Eigenschaften: form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height und width – Breite und Höhe des Images bei input type ‘image’
- list – Referenzierung einer Liste die durch den datalist-Tag definiert wurde
- min, max und step – Angabe von Grenzen und einer Schrittgröße für die Input Types date pickers, number und range
- multiple – Gibt an, das mehrere Elemente in den Typen email und file ausgewählt werden können
- novalidate – Für das Control werden keine Prüfungen durchgeführt
- pattern - Angabe eines regulären Ausdrucks, der das Muster zur Eingabe vorgibt
- placeholder – Angabe eines Wasserzeichens für das Control für Eingabehinweise
- required – Gibt an, das es sich um ein Pflichtfeld handelt
Validierungen
Mit HTML5 besitzen die Input Controls bereits implizite Validierungsmöglichkeiten, welche durch den Typ vorgeben werden – z.B. type=”email” zur Eingabe von nur zulässigen E-Mail-Adressen. Zusätzliche Regeln können durch die Attribute required, pattern, min, max und maxlength definiert werden.
CSS3 Pseudo-Klassen zur Formatierung
Das CSS3 Basis-UI-Modul bietet uns zusätzlich Pseudo-Klassen um den Validierungsstatus eines Controls zu ermitteln und die Anzeige in Abhängigkeit von diesem Status zu ändern. Hierzu ist also kein zusätzliches JavaScript-Coding notwendig, sondern dies erledigt mit HTLM5 der Browser.
Diese CSS3-Pseudo-Klassen sind:
valid
invalid required optional in-range out-of-range read-only
read-writeHiermit können nun z.B. ungültige Required-Controls mit CSS-Mitteln folgendermaßen formatiert werden:
input:focus:required:invalid {
background: pink url(ico_validation.png) 379px 3px no-repeat;
}
input:required:valid {
background-color: #fff;
background-position: 379px -61px;
}
Anzeige von Fehlermeldungen
Über den jQuery-Mechanismus vom Entfernen und Hinzufügen von CSS Klassen können in Kombination mit den Pseudo-Klassen von CSS3 über normale HTML-Mittel zusätzlich Fehlermeldungen ausgegeben werden.
Die Definition sieht folgendermaßen aus:
<label>E-Mail:</label>
<input type="email"
name="email"
id="email"
title="E-Mail-Adresse ist ein Pflichtdeld"
required />
<div id="emailRules" class="rules">
<span class="valueMissing vmsg none">Bitte eine E-Mail-Adresse angeben.</span>
<span class="patternMismatch vmsg none">Bitte eine gültige E-Mail-Adresse mit folgendem Muster angeben: 'name@site.de'.</span>
<span class="typeMismatch vmsg none">Sonderzeichen sind nicht erlaubt.</span>
<span class="isGmx vmsg none">Eine GMX-Mail Adresse ist nicht erlaubt.</span>
</div>
Die dazugehörigen CSS-Klassen sind so definiert:
.none
{
display:none;
}
.rules
{
display:inline;
}
input
{
border:1px solid #999;
}
input:valid
{
background: #fff;
}
input:invalid
{
background: #fcc;
color: #333;
}
.vmsg
{
border:1px solid #ccc;
background-color:#eee;
padding:4px;
font-size:0.8em;
-moz-border-radius:5px;
border-radius:5px;
}
Durch die Verwendung der CSS-Klasse none werden alle Fehlermeldungen standardmäßig ausgeblendet. Über jQuery bildet man nun zum späteren Zugriff ein Array mit den Pseudo CSS-Klassen mit dem Validierungsstatus (z.B. valueMissing) und fügt allen Input Controls (außer Buttons) ein oninvalid– und onblur-Event-Behandlungsmethode hinzu:
$(function () {
$(".vmsg").each(function (index, element) {
if (element.className.indexOf(" ") != -1) {
ruleNames[index] = element.className.split(" ")[0];
}
});
// Attaches validation event handlers to all input
// elements that are NOT buttons.
$(":input:not(:button)").each(function () {
this.oninvalid = validationFail;
this.onblur = validate;
});
document.getElementById("checkValidation").onclick = validate;
});
Diese Methoden nutzen die checkValidity()-Methode und die validity-Eigenschaft eines input controls, um die none-CSS-Klasse bei der entsprechenden Fehlermeldung (validity entspricht der Pseudo-CSS-Klasse z.B. valueMissing) zu entfernen.
function validate() {
$(".vmsg").addClass("none");
// Browser supports required attribute
if (Modernizr.input.required) {
validateAgainstCustomRules();
document.forms[0].checkValidity();
}
}
function validationFail(e) {
var element = e.srcElement;
var validity = element.validity;
var id = element.id;
if (!validity.valid) {
for (var i = 0; i < ruleNames.length; i++) {
checkRule(validity, ruleNames[i], id);
}
e.preventDefault();
}
}
Erledigt wird dies durch die checkRule-Methode:
function checkRule(validity, ruleName, id) {
if (eval("validity." + ruleName)) {
// pattern: '#emailRules .valueMissing'
$("#" + id + "Rules ." + ruleName).removeClass("none");
}
}
Dieses Beispiel soll zeigen, mit welchen einfachen Mitteln es mit HTML5 möglich ist, bei einem Eingabeformular eine komfortable Eingabemöglichkeit mit Client-seitigen Validierungen zu definieren. Das hierzu benötige JavaScript-Coding ist generisch und lässt sich durch Auslagerung projektübergreifend wiederverwenden.
Auch selbst definierte Plausibilitätsregeln lassen sich mit dem gleichen Verfahren definieren und durch element.setCustomValidity(“invalid”) bzw. element.setCustomValididty(“”) der Zustand des Input Controls setzen.
Browser-Unterstützung
Durch die Verwendung der Mordernizr-Library kann man die jeweilige Unterstützung eines HTML5 Features im verwendeten Browser überprüfen und darauf reagieren.
Im Beispiel: Unterstützt der Browser das neue required-Attribut?
if (Modernizr.input.required) {
validateAgainstCustomRules();
document.forms[0].checkValidity();
}
| Input type | IE | Firefox | Opera | Chrome | Safari |
|---|---|---|---|---|---|
| Nein | 4.0 | 9.0 | 10.0 | 5.0 | |
| url | Nein | 4.0 | 9.0 | 10.0 | 5.0 |
| number | Nein | Nein | 9.0 | 7.0 | Nein |
| tel | Nein | 4.0 | 9.0 | 10.0 | 5.0 |
| range | Nein | Nein | 9.0 | 4.0 | 4.0 |
| date, datetime, datetime-local, time, month, week | Nein | Nein | 9.0 | 10.0, aber kein Kalender | Nein |
| search | Nein | 4.0 | 11.0 | 10.0 | 5.0 |
| color | Nein | Nein | 11.0 | Nein | Nein |
Bemerkung: Opera bietet aktuell die beste Unterstützung für die neuen Input Types. Man kann diese aber bereits in neue Web-Seiten einbauen, diese verhalten sich dann wie normale Textboxen.
Fazit
Aktuell ist die Unterstützung der neuen HTML5 Input Types noch etwas mangelhaft, aber es dürfte nur eine Frage der Zeit sein, bis diese in allen gängigen Browsern enthalten sind. Über die Modernizr-Library kann man heute schon überprüfen, ob ein Browser diese Features unterstützt und ggf. alternative Eingabemöglichkeiten bzw. –validierungen über JavaScript anbieten. Zukünftig bieten die neuen HTML5 Input Types auf jedem Fall eine Erleichterung für die Erstellung von Formularen und sind zudem sicherer als die gleichen Validierungen über JavaScript.