Building the User Interface by Using HTML5: Organization ... - server

Building the User Interface by Using HTML5: Organization, Input, and Validation | 73
• To capture user comments after an article on a Web site
• To select preferences on a Web page
• To enter reservation information
Many client applications use some kind of Web form to interact with the user.
You use HTML input elements to build a form’s interface and ensure that information is collected
from users consistently. Validation ensures that the entered information is in the correct format
and usable before sending the data to the server. For example, if you enter “637 Park Street” into
a Web address field, which is expecting something like “http://www.example.com”, validation will
fail and prompt the user to correct the input. Validation also reduces the amount of spam and
malicious content that can make its way to the server or the recipient of the form’s data.
LICENSED PRODUCT NOT FOR RESALE
Understanding Input and Forms
TAKE NOTE
*
Check the functionality
of any form you create
in many different browsers
during development.
This ensures the elements
and attributes you
select work as expected
or the fall-back
method collects acceptable
input.
Table 3-4
Form element attributes used
in HTML5
Most Web forms, or at least many fields in most forms, require specifically formatted
input. The new HTML5 form and input attributes are intuitive, easy to use, and replace
a lot of scripting that was required in HTML 4.01 and previous versions.
Form input is the information a user enters into fields in a Web or client application form.
(To keep things simple, we use the term “Web form” most of the time, but it applies to client
application as well.) HTML5 introduces several new form and input element attributes, such
as url for entering a single Web address, email for a single email address or a list of email
addresses, and search to prompt users to enter text they want to search for. The new attributes
make form development much easier than in the past. What used to take a lot of scripting
can be accomplished by HTML5 tags.
On the flip side, many of the new attributes are not yet supported by all of the major browsers.
However, if you use a new element or attribute that isn’t yet supported, the browser “falls
back” to an alternate display, a different form of input, or what have you.
HTML5 introduces two new attributes for the form element—autocomplete and novalidate.
All attributes for the form element are listed in Table 3-4, with the new attributes indicated
with a double asterisk.
ATTRIBUTE VALUE DESCRIPTION
accept-charset character_set Specifies a set of character encodings the
server accepts
action URL Specifies the Web address to which form
data is sent
autocomplete** on Specifies whether autocomplete is on or off
off
in a form or input field; can be “on” for
specific input fields and “off” for the form,
or vice versa
enctype application/x-www- Specifies the encoding type for form data
form-urlencoded when submitting the data to a server;
multipart/
used only for method="post"
form-data
text/plain
(continued)