HTML and CSS Reference
As the web has matured, the need for a much richer set of form field types and widgets has
emerged. Today's users expect a consistent standard between web applications, particularly
when it comes to data validation. HTML5 meets this requirement with 13 new form input
types, ranging from number spinners and sliders to date- and color-pickers.
The standard also defines new attributes you can apply to <input> elements to enhance
the functionality of your forms, including presentational attributes like placeholder
and autofocus , as well as validation attributes such as required and pattern . You
can even use a set of new CSS3 pseudo-classes to style valid or invalid form elements with
for the validity of form fields, along with a new event you can use to detect an invalid data
In this chapter, you'll implement all of these new features by building an order form for
computer products. The form will use HTML5 validation to “sanitize” the input on the cli-
ent side before it's submitted.
Why build this chapter's order form?
While working through this chapter's sample application, you'll learn to use:
• New input types to provide more widgets with less coding
• New input attributes to provide validation with less coding
• data-* attributes to bind data to HTML elements
• Constraint Validation API features to create custom validation tests
We'll get started by showing you a preview of the form and helping you get your prerequis-
ites in order.
2.1. Previewing the form and gathering prerequisites
The order form you'll build in this chapter, shown in figure 2.1 , allows users to enter per-
sonal data, login details, and order and payment information.