• Build a form using the modern HTML5 input
types.
• Use self-validating input elements.
• Specify temporary placeholder text.
• Use autocomplete input elements that help
users re-enter text that they've previously
entered in a form.
• Use a datalist to specify a list of values.
• Use HTML5’s new page-structure elements to
delineate parts of a page.
2
Figure 3.1 demonstrates HTML5’s new form
input types.
These are not yet universally supported by all
browsers.
3
4
5
6
regular expression
[Link]
7
Regular Expression:
• [Link]
• [Link]
US/docs/Web/JavaScript/Guide/Regular_Expressions
• [Link]
8
9
The color input type enables the user to enter a
color.
At the time of this writing, most browsers render
the color input type as a text field in which the
user can enter a hexadecimal code or a color name.
In the future, when you click a color input,
browsers will likely display a color picker similar to
the Microsoft Windows color dialog shown in
Fig. 3.2.
10
11
autofocus Attribute
The autofocus attribute—an optional attribute
that can be used in only one input element on a
form—automatically gives the focus to the input
element, allowing the user to begin typing in that
element immediately.
Figure 3.3 shows autofocus on the color
element—the first input element in our form—as
rendered in Chrome. You do not need to include
autofocus in your forms.
12
Validation
The new HTML5 input types are self validating
on the client side, eliminating the need to add
complicated JavaScript code to your web pages to
validate user input, reducing the amount of
invalid data submitted and consequently
reducing Internet traffic between the server and
the client to correct invalid input.
The server should still validate all user input.
When a user enters data into a form then submits
the form the browser immediately checks the
self-validating elements to ensure that the data
is correct (Fig. 3.4).
13
Figure 3.5 lists each of the new HTML5 input types
and provides examples of the proper formats
required for each type of data to be valid.
14
If you want to bypass validation, you can add
the formnovalidate attribute to input type
submit in line 101:
<input type = "submit" value = "Submit"
formnovalidate />
15
The date input type enables the user to enter a
date in the form yyyy-mm-dd.
Firefox and Internet Explorer display a text field in
which a user can enter a date such as 2012-01-27.
Chrome and Safari display a spinner control —a
text field with an up-down arrow () on the right
side—allowing the user to select a date by clicking
the up or down arrow.
The start date is the current date.
Opera displays a calendar from which you can
choose a date.
In the future, when the user clicks a date input,
browsers are likely to display a date control similar
to the Microsoft Windows one shown in Fig. 3.6.
(Chrome已實作此功能)
16
17
The datetime-local input type enables the user to
enter the date and time in a single control.
The data is entered as year, month, day, hour,
minute, second and fraction of a second.
18
19
The email input type enables the user to enter an e-mail
address or a list of e-mail addresses separated by commas (if
the multiple attribute is specified).
Currently, all of the browsers display a text field.
If the user enters an invalid e-mail address (i.e., the text
entered is not in the proper format) and clicks the Submit
button, a callout asking the user to enter an e-mail address is
rendered pointing to the input element (Fig. 3.7).
HTML5 does not check whether an e-mail address entered by
the user actually exists—rather it just validates that the e-
mail address is in the proper format.
20
placeholder Attribute
The placeholder attribute allows you to place
temporary text in a text field.
Generally, placeholder text is light gray and
provides an example of the text and/or text format
the user should enter (Fig. 3.8).
When the focus is placed in the text field (i.e., the
cursor is in the text field), the placeholder text
disappears—it’s not “submitted” when the user clicks
the Submit button (unless the user types the same
text).
21
HTML5 supports placeholder text for only six
input types—text, search, url, tel, email and
password.
required Attribute
The required attribute forces the user to enter a
value before submitting the form.
You can add required to any of the input types.
In this example, the user must enter an e-mail
address and a telephone number to submit the
form (Fig. 3.9).
22
The month input type enables the user to
enter a year and month in the format yyyy-
mm, such as 2012-01.
If the user enters the data in an improper
format (e.g., January 2012) and submits the
form, a callout stating that an invalid value
was entered appears.
23
The number input type enables the user to enter a
numerical value—mobile browsers typically display
a numeric keypad for this input type.
◦ The min attribute sets the minimum valid number.
◦ The max attribute sets the maximum valid number.
◦ The step attribute determines the increment in which the
numbers increase.
The value attribute sets the initial value displayed
in the form (Fig. 3.10).
The spinner control includes only the valid
numbers. (不是所有瀏覽器都有)
If the user attempts to enter an invalid value by
typing in the text field, a callout pointing to the
number input element will instruct the user to
enter a valid value.
24
The range input type appears as a slider control
in Chrome, Safari and Opera (Fig. 3.12).
You can set the minimum and maximum and
specify a value.
The range input type is inherently self-
validating when it is rendered by the browser as a
slider control, because the user is unable to
move the slider outside the bounds of the
minimum or maximum value.
25
The search input type provides a search field
for entering a query.
This input element is functionally equivalent
to an input of type text.
When the user begins to type in the search
field, Chrome and Safari display an X that can
be clicked to clear the field (Fig. 3.13).
26
The tel input type enables the user to enter a
telephone number—mobile browsers typically
display a keypad specific to entering phone
numbers for this input type.
At the time of this writing, the tel input type is
rendered as a text field in all of the browsers.
HTML5 does not self validate the tel input type.
To ensure that the user enters a phone number in a
proper format, we’ve added a pattern attribute
that uses a regular expression to determine
whether the number is in the format:
(555) 555-5555
When the user enters a phone number in the wrong
format, a callout appears requesting the proper
format, pointing to the tel input element
(Fig. 3.14).
27
The time input type enables the user to enter an hour,
minute, seconds and fraction of second (Fig. 3.15).
The HTML5 specification indicates that a time must
have two digits representing the hour, followed by a
colon (:) and two digits representing the minute.
Optionally, you can also include a colon followed by
two digits representing the seconds and a period
followed by one or more digits representing a
fraction of a second (shown as ff in our sample text
to the right of the time input element in Fig. 3.15.
28
The url input type enables the user to enter a URL.
The element is rendered as a text field, and the
proper format is [Link]
If the user enters an improperly formatted URL
(e.g., [Link] or [Link]), the
URL will not validate (Fig. 3.16).
HTML5 does not check whether the URL entered
is valid; rather it validates that the URL entered is
in the proper format.
29
The week input type enables the user to select a
year and week number in the format yyyy-Wnn,
where nn is 01–53—for example, 2012-W01
represents the first week of 2012. Internet
Explorer, Firefox and Safari render a text field.
Chrome renders an up-down control.
Opera renders week control with a down arrow
that, when clicked, brings up a calendar for the
current month with the corresponding week
numbers listed down the left side.
30
Figure 3.17 shows how to use the new
autocomplete attribute and datalist
element.
31
32
33
34
35
The autocomplete attribute can be used on input
types to automatically fill in the user’s information
based on previous input—such as name, address or
e-mail.
You can enable autocomplete for an entire form
or just for specific elements.
For example, an online order form might set
autocomplete = "on" for the name and address
inputs and set autocomplete = "off" for the
credit card and password inputs for security
purposes.
36
37
The datalist element provides input options for a
text input element.
At the time of this writing, datalist support
varies by browser.
In this example, we use a datalist element to
obtain the user’s birth month.
Typical autocomplete example: Google search
38
HTML5 introduces several new page-
structure elements (Fig. 3.18) that
meaningfully identify areas of the page as
headers, footers, articles, navigation areas,
asides, figures and more.
39
[Link]
40
