Currently, these new input types are broadly supported across the major browsers available today. This includes browsers available on mobile platforms like iOS and Android.
Recently, I attended Web Directions Code in Melbourne. At this event, Tammy Butow (@TammyButow) delivered a presentation entitled, "Fantastic Forms for Mobile Web" where she provided an overview of the form input types introduced in HTML5. It was encouraging to hear her evangelise their use in mobile web applications. And I was even more encouraged when I had a chance to show her the work we had conducted around these new elements with Kendo UI Mobile.
In the Q1 2012 release of Kendo UI Mobile, we introduced support for many of the new HTML5 input types, including text, password, search, url, email, number, tel, file (not in iOS), date, time, month, and datetime. With Kendo UI Mobile, we provide a consistent, native-like experience across the platforms we support:
HTML5 Forms Support in Kendo UI Mobile
Using these HTML5 form elements and input types is fairly trivial with Kendo UI Mobile:
Examples of HTML5 Form Elements in Kendo UI Mobile
<div id="..." data-role="view" data-title="...">
<ul data-role="listview" data-style="inset">
<!-- search -->
<input type="search" value="search" />
<!-- url -->
<input type="url" value="http://www.kendoui.com" />
<!-- email -->
<input type="email" value="email@example.com" />
In this example, you can see that we're leveraging some of the new input field types introduced in HTML5. These fields are defined with a View structure with a nested ListView for displaying each element.
Some notes worth mentioning:
- The input elements with a picker use the native one from the current platform if it is supported.
- HTML5 form elements are fully functional only on the following platforms: iOS 5.x+, Android 4.x+, BlackBerry 6.x+, BlackBerry Playbook 1.x+.
- The styling will still work on older platforms, but the functionality will be limited to text input only.