Menü

News & Blog gefiltert nach: Formular

 

Durch HTML5-Attribute die Usability von Formularen optimieren

geschrieben am: 24.02.2013 18:50:56 Uhr, Typ: Blog
Tags zu diesem Artikel: Usability Optimierung HTML HTML5 Formular input Attribute

Ich habe mich heute mit Formularen in HTML5 beschäftigt und da sich in nahezu jeder Website Formulare befinden, möchte ich euch einige der neuen Attribute vorstellen. Grund meiner Auseinandersetzung mit dem Thema war, dass ich einfache Funktionen zur Usability-Steigerung gesucht habe,
Beginnen wir mit einem äußerst praktischen Attribut für Formularfelder: Es hört auf den schönen Namen required. Mit diesem Attribut ist es möglich Pflichtfelder zu definieren. Sind diese nicht ausgefüllt verhindert der Browser (in neueren Versionen) das Abschicken des Formulars und weißt den User darauf hin, dass das Feld nicht aufgefüllt wurde. Bei meinen Blogkommentaren sieht dies im Firefox wie folgt aus:
HTML5 Attribut required"
Beispiel für die Einbindung:
<input type="text" required />


Ein weiteres nützliches Attribut, welches in HTML5 von den Browsern weitestgehend unterstützt wird ist das Platzhalter-Attribut placeholder. Auf diese Art und Weise lassen sich Formularfelder vorausfüllen, sodass der Nutzer eine Ahnung bekommt, welche Information er eingeben soll. Das Aussehen des Platzhaltertextes richtet sich nach den CSS-Eigenschaften des Input-Feldes.
Beispiel für die Einbindung:
<input type="text" placeholder="Stefan Borchert" />


Einen kleinen aber feinen Usabilityzugewinn liefert das Attribut autofocus. Mit dieser Ergänzung im Code lässt sich beispielsweise eine Onlineshop-Suche bereits vorauswählen, sodass der Nutzer sofort lostippen kann, ohne dass er manuell in das Feld klicken muss.
Beispiel für die Einbindung:
<input type="text" autofocus />


Neben dem Autofokus bietet das Attribut autocomplete die Möglichkeit die bekannten Vervollständigungshinweise des Browsers anzuzeigen. Jedem wird es aus der eigenen Internetnutzung bekannt sein, wenn er bei einem Service seine Emailadresse oder seinen Benutzernamen zum Login einträgt. Hier hat sich der Browser die Eingabe gemerkt und schlägt sie erneut vor. - Vor Allem bei Formularen, die wiederholt ausgefüllt werden ein großer Usabilityzugewinn.
Beispiel für die Einbindung:
<input type="text" autocomplete="on"/>


Ein sehr technisches, aber für den ein oder anderen Developer sicherlich sehr interessantes, Attribut ist das Attribut pattern. Mit diesem können reguläre Ausdrücke definiert werden. Da reguläre Ausdrücke mich schnell zum Verzweifeln bringen habe ich eine Seite ausfindig gemacht, die viele reguläre Ausdrücke für HTML5-Umsetzungen kostenlos zur Verfügung stellt. Daher weiß ich nun auch, dass der reguläre Ausdruck zur Verifizierung einer deutschen Postleitzahl wie folgt lautet: [0-9]{5}.
Beispiel für die Einbindung:
<input type="text" pattern="[0-9]{5}" />


Ich hoffe, dass ich euch mit meinem kurzen Rundgang ein paar neue Möglichkeiten zur Optimierung eurer HTML5-Formulare aufzeigen konnte. Die Integration ist wie ihr gesehen habt in der Regel sehr einfach - die Usabilitysteigerung (zum Beispiel durch den Autofokus) ist hingegen immens.

Stefan Borchert - 24.02.2013 18:50:56 Uhr
Share on:
Tweet Me XING-Kontakten zeigen Share on Facebook