HTML and CSS Reference
In-Depth Information
email
input type
10.0
4.0
10.0
10.6
tel
input type
10.0
4.0
10.0
10.6
5.0
*
Indicates partial support
Both the
email
and
tel
input types look identical to the standard text input element. But
if the user is browsing on a mobile device that supports these input types, it can display
different virtual keyboard layouts depending on what type of data the user is entering. See
figure 2.2
for an example of this in action.
Figure 2.2. Different virtual keyboards are displayed on an iPhone for different input types—from left to right:
text, email, url,
and
tel
. Notice how symbols are added and removed for the
email
and
url
input types.
An entirely different keyboard is displayed for the
number
input type.
In the case of the
email
input type, the browser will also check that the user inputs a valid
email address. If not, it will raise an error when the user submits the form. The error style
is defined by the browser, which means it will look somewhat different depending on the
user's browser.
Figure 2.3
illustrates this.
