Entwicklung & Design

HTML5-Formulare: So verbesserst du die User-Experience

Seite 2 / 2

HTML5-Formulare: Neue Attribute im Detail

Die Neuerungen in HTML5 im Bezug auf Formulare beinhalten nicht nur die erläuterten Input-Typen, sondern auch einen Satz neuer Attribute. Mit diesen lässt sich die Funktionalität einzelner Eingabefelder optional noch weiter ausbauen und optimieren.

required

Mit der Ergänzung eines Formularelements um das neue Attribut required sagt man dem Formular, dass hier eine Eingabe seitens des Benutzers zwingend notwendig ist:

HTML

<input type=”email” name=”email” required />

Listing 3

Browser, welche dieses Attribut verstehen, lassen den Nutzer das Formular erst absenden, nachdem alle mit required gekennzeichneten Felder vollständig ausgefüllt sind. Im obigen Beispiel könnte der Nutzer das Formular erst abschicken, sobald er eine valide E-Mail-Adresse eingetragen hat.

placeholder

Mit dem placeholder-Attribut lassen sich Eingabefelder schnell und einfach mit Platzhaltern versehen. Der Browser kümmert sich dabei um die eigentliche Arbeit.

HTML

<input type=”search” name=”q” placeholder=”Wonach suchst Du?” />

Listing 4

html5-formulare-hilfestellung

Google vereinfacht Nutzern die Registrierung mit konkreten Feldbezeichnungen und umfangreichen Hilfestellungen.

autofocus

Das Attribut autofocus ermöglicht es, den Fokus nach dem Laden der Website gezielt auf ein bestimmtes Inhaltselement zu lenken. Beispielsweise könnte es Sinn machen, den Cursor des Nutzers automatisch im Suchfeld der Website zu platzieren. Wichtig ist, dass autofocus nur einmal im HTML-Dokument vorkommen darf.

HTML

<input type=”search” name=”q” autofocus />

Listing 5

autocomplete

Das autocomplete-Attribut feiert mit HTML5 quasi seine Wiedergeburt. Es lässt sich sowohl auf das gesamte <form>-Element als auch auf einzelne <input>-Elemente anwenden und akzeptiert als Werte on oder off. Falls aktiviert, schlägt der Browser bereits getätigte Eingaben zur Vervollständigung vor.

HTML

<input type=”url” name=”web” autocomplete=”off” />

Listing 6

multiple

Das Attribut multiple diente bisher dazu, innerhalb von <select>-Boxen eine Mehrfachauswahl zu ermöglichen. Dank HTML5 lässt sich das Attribut nun auch auf <input>-Felder anwenden. Zum einen ist das für die Formular-Validierung interessant, da so zum Beispiel mehrere per Komma getrennte E-Mail-Adressen überprüft werden können. Zum anderen ermöglicht das multiple-Attribut den gleichzeitigen Upload mehrerer Dateien ohne den Einsatz komplexer JavaScript-Lösungen.

HTML

<input type=”file” name=”images” multiple />

Listing 7

form

Web-Formulare können nicht verschachtelt werden. Dennoch soll ein Button oder ein zusätzliches Eingabefeld manchmal unabhängig vom eigentlichen Formular stehen. Dazu wurde in HTML5 das Attribut form eingeführt, welches man nicht mit dem HTML-Element <form> verwechseln sollte. Das Attribut ermöglicht Eingabefeldern, die im Quellcode außerhalb eines <form>-Elements stehen, dennoch vom Formular berücksichtigt zu werden:

HTML

<input type=”search” name=”q” form=”search_box” />
<form id=”search_box”>
 <button>Suchen</button>
</form>

Listing 8

pattern

Das neue HTML5-Attribut pattern stellt geübten Webentwicklern ein sehr mächtiges Werkzeug zur individuellen Formular-Validierung zur Verfügung. Als Wert lässt sich an das Attribut ein regulärer Ausdruck übergeben, gegen den die Nutzereingabe geprüft werden soll. Ein Feld zur Eingabe einer deutschen Postleitzahl könnten Formular-Ersteller wie folgt aufbauen:

HTML

<input type=”text” name=”zip” pattern=”^[0-9]{5}$” />

Listing 9

Mit Hilfe des pattern-Attributs lassen sich also auch sehr exotische Formularfelder erstellen. Wichtig ist, dass man dem Nutzer mitteilt, nach welchem Schema die Eingabe validiert wird; etwa über das title-Attribut des jeweiligen Eingabefeldes.

HTML5-Formulare: Bereits heute sinnvoll?

Insgesamt spricht also nichts gegen den Einsatz von HTML5-Formularen. Vor allem einfache Eingabefelder lassen sich bereits heute durch neue Input-Typen wie email, url oder number und Attribute wie required oder placeholder ohne großen Aufwand zugänglicher und nutzerfreundlicher machen, ohne die Kompatibilität auf alten Browsern zu gefährden.

Übersicht von HTML5-Formularelementen in Chrome: Der Google-Browser unterstützt bereits eine Vielzahl von Elementen.

Übersicht von HTML5-Formularelementen in Chrome: Der Google-Browser unterstützt bereits eine Vielzahl von Elementen.

Bei komplexeren HTML5-Formularelementen wie den Input-Typen date oder range gilt es abzuwägen, ob ein Einsatz trotz mangelnder Browser-Abdeckung schon lohnenswert ist. Hier hilft häufig ein Blick in das verwendete Webanalyse-Tool (zum Beispiel Google Analytics), um sich einen Überblick über die eigene Zielgruppe und die verwendeten Browser-Versionen zu verschaffen. Abschließend eine Übersicht, welche Eigenschaft bereits von welchem Browser unterstützt wird (Stand: April 2013):

Chrome (26) Firefox (20) Safari (5) Opera (12) IE 9 IE 10
Input-Typen
email x x x x
url x x x x
tel
search x x x
number x x x x
date x x
range x x x x
Attribute
required x x x x
placeholder x x x x x
autofocus x x x x x
autocomplete x x x x
multiple x x x x x
form x x x x
pattern x x x x
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Ein Kommentar
René

Hey Torben,

schöner Artikel zur Verwendung von HTML 5 Elementen, wird Zeit das sich in Zukunft mehr Personen solchen Kenntnissen annehmen.

VG

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!

Hey du! Schön, dass du hier bist. 😊

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team bestehend aus 65 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Danke für deine Unterstützung.

Digitales High Five,
Stephan Dörner (Chefredakteur t3n.de) & das gesamte t3n-Team

Anleitung zur Deaktivierung