In this chapter, we're going to improve our prototype by adding some e-commerce essentials. Forms will be central to everything we build next. While we saw some interactive UI elements in the previous chapters, forms really open up a whole new level of interaction by providing the ability to generate user requests, and to submit and collect user input.
It will be necessary to learn a few other things along the way, including form validation and amp-mustache templates. We'll also need to set up some server-side code, to handle submissions and state. This is not strictly AMP, so we'll keep this to a minimum.
In particular, in this chapter, we'll see how AMP's form support can be used to enhance the user experience by exploring the following features:
Topics covered in Chapter 6 include the following:
- Sign-up forms
- XHR/AJAX form submissions
- Form validation
- Product search forms
- Shopping carts
Buy "AMP: Building Accelerated Mobile Pages" on Amazon US, Amazon UK
View Examples
- Starting point for examples: form-start.html
- Sign-up form: signup.html
- XHR sign-up form: signup-xhr.html
- Sign-up form with built-in validation: signup-validation.html
- Sign-up form in sidebar:signup-sidebar.html
- Sign-up form with animated spinner: signup-spinner.html
- Product search form: product-search.html
- Basic shopping cart: product-cart.html
Download code
Download all code for this chapter: ch6.zip