HTML and CSS Reference
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.