HTML and CSS Reference
email input type
tel input type
* 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.