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.
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"/> |