Auswahlscheibe

Ein erweiterter Satz an Werten für den Typ eines Input-Elements bringt für Webdesigner deutliche Verbesserungen bei der Gestaltung von Webformularen. Und ein paar CSS-Pseudoklassen helfen bei der Darstellung.

In Pocket speichern vorlesen Druckansicht 11 Kommentare lesen
Lesezeit: 10 Min.
Von
  • Norman Paschke
Inhaltsverzeichnis

HTML5 bringt viele Verbesserungen für Formulare mit. Was besonders Benutzern mobiler Geräte mit kleinen Tastaturen zugute kommt, stellt Entwickler vor einige Herausforderungen. Neue Input-Typen, zusätzliche CSS-Pseudoklassen und ein stark fragmentierter Browser-Support machen es einem nicht leicht, mit der Zeit zu gehen.

Ob als unscheinbares Suchfeld oder als stiefmütterlich behandeltes Kontaktformular – auf fast jeder Webseite lassen sich Formulare irgendeiner Art finden. Seit jeher sind sie die primäre Eingabemöglichkeit auf Webseiten und erfüllen eine zentrale Rolle im Umgang mit dem World Wide Web. Ohne sie gäbe es kein Twitter, keine Registrierung bei Facebook und keine Artikelverwaltung in Magento. HTML5 enthält eine Reihe neuer Input-Typen, weitere Attribute und Funktionen, die den Gestaltungsspielraum deutlich vergrößern.

Mit einigen Zeilen CSS hat man dem kargen Formular aus Listing 1 ein halbwegs passables Aussehen verpasst (Abb. 1).

Im Folgenden soll aus einem alten Formular eins entstehen, das die Neuerungen aus HTML5 und CSS3 verwendet. Besucher können darüber einen Termin vorschlagen, weswegen es außer Standardfeldern wie Name und E-Mail Eingabefelder für Webseite und Telefonnummer sowie Datum und Uhrzeit gibt. Listing 1 zeigt das „alte“ HTML4. Ein paar CSS-Anweisungen, die auf dem FTP-Server der iX zu finden sind, bewirken, dass es aussieht wie in Abbildung 1.

Im title-Attribut der einzelnen Felder steht immer der Hinweis, in welcher Form der Nutzer seine Daten einzugeben hat. Außerdem sind Pflichtfelder mit einem Asterisk (Sternchen) versehen. Damit der Prozess richtig und vor allem sicher vonstatten geht, sollten Webdesigner die Eingaben client- und serverseitig prüfen. Je nachdem, ob man mit einem Content-Management-System arbeitet oder nicht, kommt die serverseitige Prüfung des Systems zum Tragen – oder eine clientseitige Prüfung steht an. Da alle Eingabefelder vom Typ text sind, bedeutet das, für fast jedes Feld einen eigenen Validator in JavaScript schreiben zu müssen. Außerdem müssen Designer Fehlermeldungen bei falschen oder ungültigen Eingaben ausgeben und gegebenenfalls per CSS mit einem Stil versehen. Alternativ lassen sich Plug-ins bekannter JavaScript-Frameworks für die Validierung nutzen, die die Arbeit um ein Vielfaches beschleunigen.

Unter Zuhilfenahme von HTML5 kann man sich Teile dieser Arbeit ersparen. Die clientseitige Validierung kann der Browser selbst übernehmen – ohne JavaScript. Zunächst sollte man unbedingt die Dokumenttyp-Definition auf HTML5 umstellen: <!DOCTYPE html>.

An Daten angepasste Tastaturlayouts auf dem iPhone: E-Mail, Telefon, Datum (Abb. 2)

Außerdem sollten alle Input-Felder den jeweils passenden Eingabetyp erhalten. Das Namensfeld bleibt als Einziges mit dem Typ text erhalten. E-Mail bekommt den Typ email und Webseite url. Die anderen Datenfelder bekommen der Reihe nach tel, date und time. Eine Liste aller Typen und weitere Informationen finden sich unter anderem in der HTML5-Spezifikation [a] und im Developer Network von Mozilla [b].

Außerdem sollte man die title-Attribute in placeholder umbenennen – Platzhalter, die der Browser anzeigt, solange der Benutzer noch nichts in das Inputfeld geschrieben hat. Dadurch sieht er sofort, welche Formatierung er einzuhalten hat. Pflichtfelder bekommen darüber hinaus das Attribut required. Für das E-Mail-Feld würde die Syntax folgendermaßen aussehen:

<input id="mail" type="email"
placeholder="email@example.org"
required />

Je nach Browser füllen die Platzhalter die vormals leeren Felder aus. Sollte der Fall eintreten, dass ein Browser die neuen Typen noch nicht versteht, fällt er einfach auf das Verhalten eines normalen Textfeldes zurück. Der Internet Explorer 9 kennt beispielsweise keinen einzigen neuen Typ, aber das Formular funktioniert trotzdem. Mit dem Prinzip, das sich Graceful Degradation [c, d] nennt, fertigen Webdesigner Seiten an, die besondere Eigenschaften für fortschrittliche Browser enthalten, aber für alle Browser funktionieren.

Wer mit einem Smartphone Formulare wie das in Listing 1 auszufüllen versucht, könnte spätestens nach dem dritten Feld entnervt aufgeben. Ständig muss man zwischen verschiedenen Tastaturlayouts hin- und herschalten. Die eingebauten Input-Typen helfen dagegen. Mobile Safari sowie Browser auf Android können gezielt das Tastaturlayout anzeigen lassen, das für den jeweiligen Typ am sinnvollsten ist. Das reduziert den Tastaturwechsel aus Benutzersicht auf ein Minimum, was sich nicht zuletzt positiv auf die Besuchszeiten auswirken kann. Eine browsereigene Validierung besitzt das iPhone aber derzeit nicht.

Die automatische Validierung im Browser (hier: Firefox) erzwingt beim Client die Eingabe (Abb. 3).

Versuchte man beim gegenwärtigen Stand, das leere Formular abzuschicken, sollte eine Fehlermeldung wie in Abbildung 3 am ersten Feld erscheinen.

Was aber hindert einen Benutzer daran, eine zufällige Zahlenfolge statt einer Buchstabenreihe einzugeben? Gleiches gilt für die Telefonnummer, hier sind standardmäßig Sonderzeichen und Buchstaben erlaubt. Ebenfalls wäre es nützlich, das Datum und die Uhrzeit auf bestimmte Werte beschränken zu können. Für solche Zwecke gibt es die Attribute pattern, min und max. Eine Beschränkung der Uhrzeit zeigt Listing 2. pattern beinhaltet dabei immer einen regulären Ausdruck. Damit lassen sich präzise Regeln aufstellen, die man wie üblich ausgiebig testen sollte.

Ein weiteres Attribut, autofocus, gibt an, welches Feld beim Laden der Seite den Fokus erhält. Es stellt gleichsam den Einstiegspunkt für den Cursor dar, und der Benutzer kann sofort damit beginnen, das Formular auszufüllen.

Wer möchte, kann dem Formular mit einigen CSS3-Anweisungen den letzten Schliff verpassen (siehe Listing 3). Runde Ecken, Verläufe, sogar die Asteriske lassen sich dynamisch erstellen. Dafür muss ein Designer lediglich einem label, das direkt auf ein notwendiges Input-Feld folgt, zusätzlichen Inhalt (content) nach dem Label zuweisen, indem er das Pseudo-Element ::after verwendet:

input:required + label::after {
content:" *";
}

Damit Benutzer schon Feedback bekommen, bevor sie überhaupt etwas abschicken, lassen sich die Felder beispielsweise durch farbige Umrahmungen hervorheben. Als nützlich erweisen sich dafür neue Pseudoklassen wie :required oder :invalid, die abhängig von gesetzten Attributen und eingegebenen Werten unterschiedliches Styling erlauben. Sie sind Bestandteil des Basic User Interface Module, das das World Wide Web Consortium innerhalb von CSS3 spezifiziert [e].

Bei unvollständiger oder falscher Eingabe umrandet der Browser das Feld rot, bei korrekter grün (Abb. 4).

Eine Kombination aus mehreren Pseudoklassen knüpft CSS-Befehle an bestimmte Bedingungen. Der Ausdruck input:required:focus:valid spricht nur Input-Elemente an, die das Attribut required besitzen, den Fokus haben und deren Wert erlaubt ist – wie Ziffern im Telefonfeld. Sind alle Bedingungen erfüllt, erscheint ein grüner Rahmen, ist die Eingabe falsch, färbt er sich rot (siehe Abbildung 4).

Komfortabel: Opera bietet für Datumsfelder
einen Kalender an (Abb. 5).

Opera hat bislang den weitestgehenden Support für die neuen Formulare und zeigt beispielsweise einen Kalender an, mit dem sich bequem ein Datum aussuchen lässt (siehe Abbildung 5). Bisher waren dazu immer recht komplexe Plug-ins erforderlich (etwa jQuery UI mit Datepicker, [f]).

Versucht man, Elemente an das Styling seiner Seite anzupassen, gelangt man schnell an die Grenzen dessen, was CSS derzeit kann – vor allem browserübergreifend. Ähnlich verhält es sich mit den Validierungsmeldungen, die in Farbe, Größe und Verzierungen stark variieren (siehe Abbildung 6). Die nötigen Pseudoelemente für das Styling solcher Dinge sind nicht definiert und das dürfte wohl so bleiben. Webdesigner können deshalb kein über alle Browser und Betriebssysteme hinweg einheitliches User Interface (UI) mit CSS realisieren, da das Aussehen der Eingabehilfen nicht zum Aufgabengebiet von CSS gehört. Vielmehr ist das Design von UI-Elementen Teil des Browsers und nicht der dargestellten Webseite. Folglich muss man dem Browser das Styling der UI-Elemente überlassen (wie man es von Radiobuttons und Checkboxes schon kennt). Wer trotzdem versuchen will, eine weitgehend einheitliche Darstellung zu erreichen, sollte einen Blick auf Modernizr (siehe den iX-Artikel [1] und [g]) werfen. Mit dieser Bibliothek können Webdesigner Browser auf von ihnen unterstützte Eigenschaften testen. Das Ergebnis der Tests landet als CSS-Klassen im Attribut class des html-Elements, über die man per CSS oder JavaScript auf Browserunterschiede entsprechend reagieren kann.

Kaum einheitlich darzustellen: Fehlermeldungen in verschiedenen Browsern:
Firefox, Chrome und Opera (Abb. 6)

Wer lieber gänzlich auf eine automatische Validierung verzichten will, kann dem form-Element das Attribut novalidate geben, was den Prüfvorgang deaktiviert. Bei dieser Variante kann er wieder auf eine JavaScript-basierte Prüfung der Eingaben zurückgreifen. Muss es aber auch …

Wie angedeutet, bildet der unterschiedlich starke Browsersupport den derzeit größten Stolperstein bei der Verwendung von HTML5-Formularen. Während der aktuelle IE9 keinen der oben beschriebenen Typen unterstützt (erst ab Version 10 [h]), können Firefox und Chrome häufig genutzte Typen wie email, tel und url schon gut verarbeiten.

Mehr Infos

iX-TRACT


  • Vor allem durch neue Werte für das Input-Attribut type können Webdesigner mit HTML5 ihre Formulare klarer ausdrücken.
  • Viele Browser sind in der Lage, Attributwerte wie ein Datum zu analysieren und Fehlermeldungen auszugeben.
  • Nutzer mobiler Browser profitieren davon, dass sie ihre virtuelle Tastatur nicht ständig wechseln müssen.

Aber selbst sogenannte moderne Browser sind noch weit von einer kompletten Unterstützung entfernt. Wer wissen will, was der gerade verwendete Browser alles kann, sollte beta.html5test.com aufrufen. Unter dem Punkt „Forms“ werden alle Funktionen rund um Formulare getestet. Je mehr Punkte der Browser erzielt, desto besser. Chrome 21 kommt auf 84 von 108 Punkten, Safari 5.1.7 auf 65, Firefox 14.0.1 auf 56 – und Opera 12.00 brilliert mit 102.

Dennoch ist es an der Zeit, HTML5-Formulare auf eigenen Seiten einzubauen. Denn selbst, wenn man die automatische Validierung abschaltet, bringen die neuen Input-Typen großen Nutzen mit sich. Schon allein für die immer größer werdende mobile Anwenderschaft sollte man einen Umstieg in Erwägung ziehen. Man kann sich außerdem sicher sein, dass Browserhersteller künftig immer mehr Standards umsetzen, besonders aus eigenem Interesse heraus, nicht den Anschluss zu verlieren.

[1] Stefan Mintert; Webformulare; Form folgt Funktion; Neue Eingabeelemente in HTML5; iX kompakt Webdesign 2012, S. 22

[2] Helge Grimm; HTML5; Reizwörter; Modernizr: Browser per JavaScript steuern; iX 11/2011, S. 148 und in iX kompakt Webdesign 2012, S. 94

Alle Links: www.ix.de/ix1209138

Mehr Infos

Listing 1: Ausgangspunkt HTML4-Formular

<form id="form-termin" action="#" method="post">
<fieldset class="data">
<h2>Vereinbaren Sie einen Termin mit uns!</h2>
<p><input id="name" type="text" title="Vorname Nachname"/>
<label for="name">Vor- und Nachname *</label></p>
<p><input id="mail" type="text" title="email@example.org"/>
<label for="mail">E-Mail *</label></p>
<p><input id="url" type="text" title="http://www.example.org"/>
<label for="url">Webseite</label></p>
<p><input id="phone" type="text" title="nur Zahlen erlaubt"/>
<label for="phone">Telefonnummer</label></p>
<p><input id="date" type="text" title="YYYY-MM-DD"/>
um <input id="time" type="text" title="hh:mm"/> Uhr
<label for="date">Datum und Uhrzeit *</label>
</p>
</fieldset>
<fieldset class="buttons">
<button type="submit">Absenden</button>
<button type="reset">Eingaben löschen</button>
</fieldset>
</form>

Mehr Infos

Listing 2: Vorgaben für eine Zeitangabe

 <input id="time" type="time" 
placeholder="hh:mm" title="hh:mm"
min="08:00" max="18:00"
pattern="([01]?[0-9]|2[0-3]):[0-5]?[0-9]"
required />
Mehr Infos

Listing 3: Neue Pseudoklassen und Verläufe

 /* Browser Reset */
input:invalid {
box-shadow:none;
}
/* ersetzt Asterisk */
input:required + label::after {
content:" *";
color:#f00;
}
/* nicht oder falsch ausgefuellte Felder rot markieren */
input:focus:invalid {
border-color:#f00;
}
/* richtig ausgefuellte Felder gruen markieren */
input:required:focus:valid {
border-color:#0c0;
}
/* Buttons mit grauem Gradient und runden Ecken */
button {
background:-moz-linear-gradient(top,#fff,#ccc);
background:-webkit-linear-gradient(top,#fff,#ccc);
background:-ms-linear-gradient(top,#fff,#ccc);
background:-o-linear-gradient(top,#fff,#ccc);
background:linear-gradient(top,#fff,#ccc);
border-radius:5px;
}
/* Submit-Buttons mit blauem Verlauf */
button[type="submit"] {
background:-moz-linear-gradient(top,#0cc,#08c);
background:-webkit-linear-gradient(top,#0cc,#08c);
background:-ms-linear-gradient(top,#0cc,#08c);
background:-o-linear-gradient(top,#0cc,#09c);
background:linear-gradient(top,#0cc,#08c);
}

(hb)