HTML5 Guidelines for Web Developers

(coco) #1

42 Chapter 3—Intelligent Forms


As soon as the web page has finished loading, a loop runs over all input elements
to analyze their type attributes. If the type attribute corresponds to the standard
type text, its value is set to not available. The HTML code for the new input ele-
ments looks like this:

<fieldset>
<legend>New input types</legend>
<p><label for=tel>tel</label>
<input type=tel id=tel name=tel>
<p><label for=search>search</label>
<input type=search id=search name=search>
<p><label for=url>url</label>
<input type=url id=url name=url>
<p><label for=email>email</label>
...

In Figure 3.3 you can see what the result of this test looks like on an Android
cell phone. The system’s WebKit-based browser (left) pretends to know the types
tel, search, url, and email but does not really help when it comes to entering the
telephone number via the keyboard (center). Opera Mobile in version 10.1 beta
(right) supports url and email, plus the date and time types.

Figure 3.3 Support of new form input types on an Android 2.1 phone with browsers WebKit
(left, center) and Opera (right)

That is a rather disappointing result for the otherwise so modern Android brows-
er. Results look slightly better on the iPhone: At least the smartphone adapts the
software keyboard, displaying a numeric keyboard when you try to enter a phone
number and adding the @ character on the keyboard for the input type email.
Free download pdf