HTML and CSS Reference
In-Depth Information
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.
figure 6-49
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.
type="text"
type="email"
type="tel"
type="url"
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
type=”tel”
.
◗
3.
Insert the attribute
type=”email”
into the
input
element for the
email
field.
Figure 6-50 highlights the newly added code.
