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