Peter Lubbers - Pro HTML 5 Programming

Download from Wow! eBook
172
CHAPTER 7 ■ USING THE HTML5 FORMS API
Table 7-2. New HTML5 Form elements appearing in browsers
Type Purpose
tel Telephone number
email Email address text field
url Web location URL
search Term to supply to a search engine. For example, the search bar atop a browser.
range Numeric selector within a range of values, typically visualized as a slider
What do these new input types provide? In terms of programmatic APIs… not a lot. In fact, in the
case of the types for tel, email, url, and search, there are no attributes distinguishing them from the
simplest input type of text.
So, what do you get exactly by specifying that an input is of a specialized type? You get specialized
input controls. (Restrictions may apply. Offer void in many desktop browsers.)
Let’s illustrate with an example. By specifying that an input is of type email:
rather than using the conventional standard which states that a field is merely of type text:
you provide a hint to the browser to present a different user interface or input where applicable. You also
provide the browser the ability to further validate the field before submission, but we’ll cover that topic
later in this chapter.
Mobile device browsers have been some of the quickest to take up support for these new form
controls types, and they do so by displaying a different input interface based on the type declared. In the
Apple iPhone, the standard onscreen keyboard display for an input with type text appears as it does in
Figure 7-1.