HTML and CSS Reference
In-Depth Information
Figure 2.1. The order form running in Google Chrome. The user is given two options when submitting the form:
Submit Order or Save Order. The Submit Order button performs validation and processes a user's order, whereas
the Save Order button bypasses the validation and saves the details, so users can come back later and finish filling
out their order.
The form makes use of several new HTML5 features:
•
Form
<input>
element types
(
email
,
tel
,
number
, and
month
) and
attrib-
utes
(
required
,
pattern
,
autofocus
,
placeholder
, and
max
and
min
)
to provide users with better widgets and data validation when appropriate.
• The
data-*
attributes
to hold the price of each product, the
valueAsNumber
property
to read input values in numeric format, and the
<output>
element
to
present subtotals and grand totals.
• The
formnovalidate
and
formaction
attributes
to bypass data validation
and save an incomplete form.
• The
Constraint Validation API
to perform custom validation and detect when the
user attempts to submit the form with elements that are invalid, and
CSS3 pseudo-
class selectors
to style invalid elements.
• The
Modernizr.js JavaScript library
and
polyfills
to serve users whose browsers
don't support various HTML5 features. (Although we admit that Modernizr and
polyfills aren't strictly HTML5 features, we recommend that you use them if
you're serious about developing HTML5 applications.)
When you've finished, the order form will be functional in the latest versions of all the ma-
jor browsers, although you may find varying levels of support for some features such as
widgets for new input types and inline error messages for the Constraint Validation API.
But browser hiccups will become less and less an issue as support for the new features in-
creases.
Note
This chapter covers only the client-side portion of the order form. When the form is submit-
ted, it makes a request to a URL. To perform further processing, you'll need to implement
the form on the server side using your choice of server-side language or framework (such
as PHP or Ruby on Rails). The server-side aspect is outside the scope of this topic.
