HTML5 for the mobile web forms and input types
In this article we take a look at some of the new form enhancements available in html5, and look at how they contribute to an improved user experience for mobile forms. In particular we will see how forms can be enhanced with the additional input types offered by HTML5, and show what you can expect across various classes of mobile browser.HTML5 Input Types
HTML5 has a bunch of new input types for forms. These input types allow better input control and validation, some of which are particularly useful for mobile users, where input is often more cumbersome than on desktop. The full list of input types is included below:
In the following sections, we take a look at some of the more interesting ones, such as color , date , email , range , tel , which have fairly obvious application to mobile devices. For demonstration purposes, we provide screenshots on a number of mobile browsers, as well as embedding live examples throughout the article.Input type color
When supported, using this input type will trigger a colour-picker on the client device. The chosen colour will be submitted as the corresponding RGB hex value.Usage: <inputtype="color" />
Depending on your browser, a text field, or a colour-input field may be displayed below. If it is a colour-input, click it to trigger the colour picker.
Color input as implemented on Opera Mobile, and Chrome browsers on Android Browser support and fallbacks Android iOS IE Mobile Opera Mobile Opera Classic Opera Mini Firefox Mobile Chrome for Android color (Sources: caniuse.com , DeviceAtlas , mobilehtml5.org )
When supported, interacting with a field using this input type will display a native-like date picker widget.Usage: <inputtype="date" />
Date input type as implemented on Opera Mobile for Android, and iOS 7
Note that the date input type, as well as variants datetime and datetime-local offer useful attributes, such as min and max that can restrict and validate the user input data. We take a closer look at this in the section below on.Browser support and fallbacks Android iOS IE Mobile Opera Mobile Opera Classic Opera Mini Firefox Mobile Chrome for Android date (Sources: caniuse.com , DeviceAtlas , mobilehtml5.org )
Although the implementations are different across the various mobile OS platforms, support is quite widespread, with the exception of the stock Android browser.
On desktop browsers too, this input type is widely supported, with the exception of Safari, Internet Explorer and Firefox. However, IE Edge does support date input types, and it’s under development in Firefox (and available in Firefox Nightly builds).Input type datetime, and datetime-local
These input types allow the user to enter both time and date information. When supported, interacting with a field using this input type will display a native-like date picker widget, and a time widget below the date. The difference between datetime and datetime-local is that the former is with respect to UTC time, but the latter does not carry any timezone information at all.Usage: <inputtype="datetime-local" /> Try it:
Datetime-local input as implemented on Chrome for Android browser Browser support and fallbacks Android iOS IE Mobile Opera Mobile Opera Classic Opera Mini Firefox Mobile Chrome for Android
datetime-local(Sources: caniuse.com , DeviceAtlas , mobilehtml5.org )
At the time of writing, there is more support across mobile browsers for datetime-local than there is for datetime . For instance, Chrome and Firefox for Android both support datetime-local but not datetime . In fact selecting datetime field in Firefox (v24.0) crashed the browser in our testing. So, unless there is a specific requirement to include the timezone information with the form submission, it’s probably safer to stick with datetime-local .
This one doesn’t need much discussion. Where supported, the input will be restricted to valid email addresses by the browser. When an invalid email address is submitted, the browser will display an error message, as illustrated in the image below. The browser may also display a modified keyboard to include the ‘@’ symbol, to make inputting an email address that little bit easier.Usage: <inputtype="email" />
Try it:On desktop browsers, this field will look like a normal text field; on mobile browsers a ke