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:
<div id="..." data-role="view" data-title="..."> <ul data-role="listview" data-style="inset"> <li> <!-- search --> <input type="search" value="search" /> Search: </li> <li> <!-- url --> <input type="url" value="http://www.kendoui.com" /> URL: </li> <li> <!-- email --> <input type="email" value="firstname.lastname@example.org" /> Email: </li> </ul> </div>
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:
John Bristowe is a member of the Developer Relations team at Progress. He specialises in web and mobile app development.
Subscribe to be the first to get our expert-written articles and tutorials for developers!