chapter two

Chapter 2. Form creation: input widgets, data binding, and data validation

 

Chapter 2 at a glance

Topic

Description, methods, and so on

Page
New input types[1] HTML5 <input> element types  
 
  • email
42
 
  • tel
42
 
  • number
46
 
  • month
49
New input attributes[1] HTML5 attributes on <input> elements  
 
  • required
42
 
  • pattern
49
 
  • autofocus
43
 
  • placeholder
42
 
  • min and max
46
data-* attributes Storing key/value data in attributes on elements 46
valueAsNumber property Reading input values in numeric format 54
<output> element Displaying the output of calculations 47
Preventing validation Providing means of bypassing client-side validation  
 
  • formnovalidate attribute
51
 
  • formaction attribute
51
Constraint Validation API Client-side API for validation  
 
  • setCustomValidity method
59
 
  • validationMessage property
59
 
  • invalid event
60
CSS3 pseudo-classes Styling invalid elements with CSS3 61
Backward compatibility Feature detection and unsupported browsers  
 
  • Modernizr.js
63
 
  • Polyfills
64
 
  • Validation
65

1 Only the input types and attributes used or discussed in this chapter are listed here. For comprehensive coverage, visit mng.bz/wj56.

Look for this icon throughout the chapter to quickly locate the topics outlined in this table.

This chapter covers

2.1. Previewing the form and gathering prerequisites

2.2. Building a form’s user interface

2.3. Calculating totals and displaying form output

2.4. Checking form input data with the Constraint Validation API

2.5. Providing fallbacks for unsupported browsers

2.6. Summary