HTML5 Forms Support in Kendo UI Mobile

HTML forms are used to collect data from the user through a series of input and selection elements. Prior to HTML5, the elements and input types defined for user input facilite general purpose scenarios. However, a number of challenges remain - specifically as it relates to the form and function of the elements when rendered to the user agent. Often, developers will have to use a combination of JavaScript and styling via CSS to achieve the desired result, which included the validation of data. The HTML5 specification helps to eliminate some of this work by defining new input types: tel, search, url, email, datetime, date, month, week, time, datetime-local, number, range, and color.

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="kendoui@kendoui.com" />
			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:

• 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.