Better UX Through INPUT Tags And Why They Are Important For Mobile
Last Updated -
As browsers adopt more and more HTML5 goodness developers need to be cognoscente of new features to create better and better user experiences. As far back as I can remember the INPUT element has been a workhorse that allows the web to collect information from users. You have always been able to specify if the input field is text or a password by setting the type. Other options include buttons, checkboxes, file uploads and just about anything else we have needed for basic data entry.
As users and platforms continue to mature it has become more and more evident that type='text' was just not going to cut it. Too often a developer has been forced to use something like the masked edit plugin or some other JavaScript to format data and limit certain character inputs. This often meant adding a class hook like class='phone' or class='email' to drive a custom engine. As the world races forward with newer natural user inputs like touch the need to drive specialized soft keyboards has become more important.
The Current Chrome Support for HTML5 INPUT Types
Fortunately HTML5 helps us out. New INPUT types expand the usefulness of this long-time friend. We now have a quick way to define a native color picker, date/time inputs, email, numbers, ranges and much more. Of course browser support varies, but all the modern browsers support search, tel, url and email. Opera supports all the new HTML5 INPUT types. Of course Internet Explorer 9 does not support any of the new types, which also carries into Windows Phone.
Chrome Doing Native E-Mail Format Validation
Chrome Doing Native Required Field Validation
Opera Displaying a Native Color Picker
Other than providing some guided input features one of the great advantages these new input types force is the display of a tailored keyboard. For example when a user is on a SmartPhone or tablet with no QWERTY keyboard a soft or digital keyboard is displayed on the screen. If you use one of these phones you quickly realize there is a lot of extra tapping that must be done to switch between the lettered keypad to the numeric to the special character keypad. Which when you are typing an e-mail or url quickly becomes a nuisance. Fortunately the majority of mobile platforms will honor the new HTML5 input types and display a more appropriate soft keyboard, giving the user a much easier way to enter the desired characters as they are typing with their thumb.
So as you are designing your next web form please leverage these new input types. You should also include a good polyfil library such as Modernizr in your page to ensure you can style these types correctly for Internet Explorer. The benefits of these new input types really shines on SmartPhones and today's tablets.