SAE Alumni Magazine 1|12

MAX BÖCK has studied web design & develop- ment at SAE Institute Vienna and has been working as a freelance web designer since 2008. Modern Android and iOS browsers currently support many of the new inputs. Moderne Android- und iOS-Browser unterstüt- zen bereits viele der neuen Inputs. Seit der ersten Veröffentlichung der HTML5-Spezifikation im Januar 2008 hat das W3C zahlreiche neue Elemente vorgestellt, darunter bis dato auch 13 neue Typvarianten des Tags. Wurden bis jetzt die meisten Formulare haupt- sächlich aus Text-Inputs konstruiert, so ermöglicht HTML5 eine sehr viel genauere Definition der erwarteten Daten, was einige Vorteile mit sich bringt. Since the HTML5 specification was first published in Janu- ary 2008 W3C has proposed numerous new elements in- cluding 13 new types of tags. Until now forms have been primarily composed of text inputs. HTML5 enables a very exact definition of the expected data which has a number of benefits. Online forms are a hard nut to crack. However the new HTML5 standard offers some interesting solutions to optimally assist the user when filling out forms and to save developers time and stress. Webformulare sind eine harte Nuss. Doch der neue HTML5-Standard bietet einige interessante Lösungen, um dem User optimal beim Ausfüllen zu assistieren und dem Entwickler Zeit und Nerven zu sparen. The future of online forms New ways with HTML5 by Max Böck “A considerable improvement can be achieved, especially in the area of mobile devices such as Smartphones or tablets.” Photos:MaxBöck/AppleInc. HTML5 Logo and form source code Live Feedback with CSS3 In order to recognise and deal with different form field conditions some new pseudo classes are envisaged in the CSS3 UI module. The most important of these are ‘valid’, ‘invalid’ and ‘required’. They enable the fields to be styled in real time and even give the user feedback about their entries. INFOBOX One example of the new input is the long-awaited email field which can recognise valid email addresses without the need for additional code. Also input options are represented which are already considered good practice but until now have only been available via UI plugins such as slider, date picker and colour picker for example. Other variants are ‘number’, ‘tel’ and ‘url’ whose functions are largely self-explanatory. All these ele- ments have to an extent direct inbuilt validation and prevent the form from being sent when an error has been entered. To additionally simplify user interaction with the forms cer- tain attributes have been created which should improve the us- ability aspects. ‘autofocus’ puts the cursor at the beginning of the first field and the ‘placeholder’ attribute enables the use of placeholder text which provides information about the data required and disappears after the field has been completed. The more exact specification of the input fields also has usability advantages on mobile devices. Modern Android and iOS browsers currently support many of the new inputs. If the user brings such an input field into focus they are au- tomatically offered an appropriate version of the keypad. If it deals with an email field dedicated buttons for ‘@’ and ‘.’ are shown, for URLs the slash and ‘.com’ buttons. iPhone, Blackberry and some Android Smartphones also use their own user interface for HTML5 inputs such as the date picker and on request also show information from the calendar. Furthermore the improved semantics result in increased acces- sibility. Screen readers and other tools benefit from the detailed layout of the forms and can provide effective support. Many of the innovations in the area of online forms can al- ready be applied today. Although the changeover to HTML5 and complete support of its functionality will probably take some time, use of the technology has already brought many advantages. A considerable improvement can be achieved, es- pecially in the area of mobile devices such as Smartphones or tablets. The additional use of scripting solutions is still re- quired for a really consistent interface across all browsers, but in future undoubtedly more and more developers will draw on the new possibilities and so slowly but surely a new standard will be established. n Ein Beispiel eines neuen Inputs ist etwa das lang erwartete eMail-Feld, dass ohne weiteren Code eine zulässige eMail- Adresse erkennen kann. Auch Eingabemöglichkeiten, die be- reits zum guten Ton gehören, bislang aber nur über ‚UI-Plu- gins‘ möglich waren, wie z.B. Slider und Date- oder Colorpi- cker, werden vertreten sein. Andere Varianten sind ‚number‘, ‚tel‘ oder ‚url‘ – ihre Funktionsweise ist weitgehend selbster- klärend. All diese Elemente haben gewissermaßen eine direkt eingebaute Validierung und verhindern bei einem Fehler das Absenden des Formulars. Um dem User den Umgang mit Formularen zusätzlich zu er- leichtern, wurden einige Attribute geschaffen, die den Aspekt der Usability verbessern sollen. ‚autofocus‘ etwa setzt den Cursor bereits zu Be- ginn in das erste Eingabefeld, das ‚placeholder‘- Attribut ermöglicht den Einsatz von Platzhalter- text, der Auskunft über die erwarteten Daten gibt und beim Ausfüllen verschwindet. Die genauere Spezifikation der Eingabefelder bringt auch im Bereich der mobilen Endgerä- te Vorteile in der Usability mit sich. Moderne Android- und iOS-Browser unterstützen bereits viele der neuen Inputs. Bringt der User ein sol- ches Eingabefeld in den Fokus, wird ihm auto- matisch eine angepasste Version des Tastenfeldes angeboten – handelt es sich etwa um ein eMail-Feld, sind eigene Tasten für ‚@‘ und ‚.‘ reserviert, bei URLs gibt es Tasten für Slash und ‚.com‘. iPhone, Blackberry und einige Android Smartphones stellen bei HTML5-Inputs wie dem Datepicker zudem ihr ei- genes Userinterface zur Verfügung und zeigen bei Bedarf etwa Informationen aus dem Kalender. Weiters geht mit einer verbesserten Semantik auch eine Stei- gerung der Accessability einher. Screenreader und andere Werkzeuge profitieren von der detailierten Auszeichnung der Formulare und können effektivere Hilfestellung leisten. Viele der Neuerungen im Bereich von Webformularen können bereits heute Anwendung finden. Obwohl die Umstellung auf HTML5 und die Unterstützung des vollen Funktionsumfangs wohl noch einige Zeit auf sich warten lassen werden, entstehen durch den Einsatz der Technologie schon jetzt viele Vorteile. Besonders im Bereich der mobilen Endgeräte wie Smartpho- nes oder Tablets kann eine deutliche Verbesserung erzielt wer- den. Noch ist für eine wirklich konsistente Oberfläche in allen Browsern zwar der zusätzliche Gebrauch von Scriptlösungen nötig, doch werden in Zukunft zweifelsohne immer mehr Ent- wickler auf die neuen Möglichkeiten zurückgreifen – und so langsam aber sicher einen neuen Standard etablieren. n URL input on an iPhone nline forms are a hard nut to crack. However the new HTML5 standard offers some interesting solutions to optimally assist the user when filling out forms and to save developers time and stress. Webformulare sind eine harte Nuss. Doch der neue HTML5 Standard etet einige interessante Lösungen, um dem User optimal beim Ausfüllen zu assistieren und dem Entwickler Zeit und Nerven zu sparen. 116 PRODUCTION & KNOW HOW // MEDIA PRODUCTION & KNOW HOW // MEDIA 117