Duration: 20 to 30 minutes.
In this exercise, you will add a checkout form to the Nan & Bob's site.
- Open WidgetsUI/Exercises/forms.html in a file editor.
- Add sample text to the top of the #checkout page ("Your Order: 2 items, $10.50") - the form won't, of course, actually be totaling real items.
- Add an open and close form tag to the #checkout page.
Add an attribute data-ajax="false" to the form tag, to prevent the form from being sent via Ajax. Why? Because we display all pages (each as a div with data-role="page") in our site in one file, we need to submit the form without Ajax to ensure that the thank-you page shows after the user submits the form.
- Within the form tag, add fields for the following data; use appropriate field types, including new HTML5 form controls:
- First and last name.
- Shipping address.
- Date of birth.
- Shipping option (standard, expedited, etc.).
- Rate our service (on scale of 0=low, 10=high).
- How did you hear of us? (web, newspaper, other).
- Additional notes.
- Create a "thank-you page" with an appropriate thank-you message; use this page as the target of the checkout form.
- Test your work in a mobile browser; the results should look like this:
Adding the form tag with attribute
data-ajax="false" allows us to submit the form without using Ajax - and thus to submit the form to the
We add appropriate fields for each piece of submitted information:
input type="text" for the first and last names.
textarea for the shipping address and notes.
- Inputs of type
date for the email and date-of-birth fields, respectively.
select for the shipping options.
- A slider for the rate-our-service field.
- Checkboxes for "how did you hear of us?".