HTML and CSS Reference
In-Depth Information
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
zero JavaScript. And if you have advanced validation requirements you can't provide nat-
ively, the new Constraint Validation API offers a standardized JavaScript API that can test
for the validity of form fields, along with a new event you can use to detect an invalid data
entry.
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.
