HTML and CSS Reference
In-Depth Information
figure 6-50
applying the tel and email data types
input box contains a telephone number
input box contains an e-mail address
◗
4.
Save your changes to the file.
◗
5.
If you have access to a mobile device that uses a virtual keyboard, access the
survey.htm
file and verify that the keyboard layout changes when the focus is
placed on the input boxes for the
phone
and
email
fields.
Trouble?
At the time of this writing, not all mobile devices alter their virtual key-
board layouts for different HTML5 data types.
Specifying Dates and Times
Next, Alice wants you to set the data type of the
visitdate
field to
date
. For browsers
that support the
date
type, this will bring up a calendar widget from which users can
select a date. The
date
data type is only one of five date types used for entering date
and time values;
date
is used for recording a calendar date as a text string in the format
yyyy-mm-dd
where
yyyy
is the four-digit year value,
mm
is the two-digit month value, and
dd
is the two-day day-of-the-month value.
The various date and time data types do not have a lot of support in the browser
market at the time of this writing. Only Opera displays a calendar widget, while Google
Chrome for Windows currently provides a box with spin arrows that can be used to enter
a date value. Some handheld devices such as the BlackBerry provide a calendar scroll
for selecting a date and/or time.
You'll change the data type of the
visitdate
field to
date
now.
To change the data type of the
visitdate
field:
◗
1.
Return to the
survey.htm
file in your text editor.
◗
2.
Locate the
input
element for the
visitdate
field and insert the attribute
type=”date”
as shown in Figure 6-51.
