Our mobile sites will need to accept user input - registration forms, comment forms, and the like to ask users to send us, via form fields, some information. HTML5 makes available a set of new form input types and attributes that enhance the user experience. Keep in mind that adoption for some of these new features is spotty at best; we'll cover the better implemented options.
There are 13 new input types:
We'll concentrate on a few of the more useful types for mobile.
The tel type input expects a phone number. Many phones will present a numeric keyboard:
The date type of input allows the user to enter a date with no time zone. Some smartphone browsers present a date picker when a field of type date receives focus. iPhones with iOS version 5 or later, for instance, offer a date picker - earlier versions do not.
Fields of type email expect a valid email address. Many phones will show a contextually appropriate set of characters for input; the iPhone, for instance, displays the "@" character:
Fields of type url are for entering full website address. This field type excludes invalid characters for a URL, such as a space. Many phones will show a contextually appropriate set of characters for input; the iPhone, for instance, displays the ".com" key:
New Field Attributes
The placeholder attribute is among the more useful new HTML5 field attributes: it allows us to specify an example value for the field, a value that disappears when the user begins to enter content in the field.
The required attribute is very useful - but, sadly, not well supported among mobile browsers: the automatic client-side HTML5 form validation that works on desktop browsers is lacking on their mobile counterparts.