HTML5 Input types

Input Types

New form input field types were introduced in HTML5. These properties allow you to invoke a specific variant of a virtual keyboard when the user places focus on the given input field.

Developers should always define their HTML input fields with an appropriate input type. This technique provides a very high ROI in terms of effort required to generate a highly positive user experience. If the given rendering engine does not support input types, it will simply ignore them. Otherwise an ideal user experience can be provided.

Input element types

Using a BlackBerry Smartphone or PlayBook, apply focus to the following fields to observe which variant of the virtual keyboard is invoked.

text: <input type="text" autocomplete="off" />
placeholder: <input type="text" placeholder="Type me"/>
password: <input type="password"/>
tel: <input type="tel"/>
url: <input type="url"/>
email: <input type="email"/>
number: <input type="number"/>
range: <input type="range"/>
date: <input type="date"/>
time: <input type="time"/>
datetime: <input type="datetime"/>
month: <input type="month"/>
datetime-local: <input type="datetime-local"/>
search: <input type="search"/>
color: <input type="color"/>