HTML and CSS Reference
All of these data types are used with the input element. For example, to create an
input box for e-mail addresses, you would use the input element
<input type=”email” name=” name ” />
where name is the name of the data field in which you want to store an e-mail address.
You'll explore these different data types in more detail now.
The email , tel , and url Data Types
The email , tel , and url data types are used for storing e-mail addresses, telephone
numbers, and Web addresses, respectively. The input controls for these data types
appear as simple text boxes. However, touch screen devices that use virtual keyboards
can alter the keyboard layout in response to different data types. Figure 6-49 shows the
iPad virtual keyboard layout for the text , email , tel , and url data types. Note that the
layout for the email data type includes the addition of the @ character, which is a part of
all e-mail addresses. The layout for the tel data type displays a row of numbers for easy
typing of a telephone number. Finally, the keyboard layout for the url data type displays
characters such as the / and : characters that are often used in URLs, as well as a key
that automatically inserts the .com text string.
virtual keyboards for different data types
If you don't have access to
a mobile device, you still
can test your Web pages
on one of the many emula-
tors found on the Web.
If an input box is opened by an older browser that doesn't support one of the new
HTML5 data types, the browser simply treats the data field as basic text. Thus, there is
little reason not to use one of the new data types. Older browsers can't display anything
but a simple text box anyway; but with newer browsers, you can enhance the user expe-
rience by employing a more descriptive data type.
You'll return to the Red Ball Pizza survey form now to change the data type of the
email and phone fields to use the email and tel data types.
To apply the email and tel data types:
1. Return to the survey.htm file in your text editor.
2. Scroll down to the input element for the phone field and insert the attribute
3. Insert the attribute type=”email” into the input element for the email field.
Figure 6-50 highlights the newly added code.