Adding Forms - Exercise

Contact Us or call 1-877-932-8228
Adding Forms - Exercise

Adding Forms

Duration: 20 to 30 minutes.

In this exercise, you will add a checkout form to the Nan & Bob's site.

  1. Open WidgetsUI/Exercises/forms.html in a file editor.
  2. 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.
  3. 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.
  4. 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.
    • Email.
    • 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.
  5. Create a "thank-you page" with an appropriate thank-you message; use this page as the target of the checkout form.
  6. Test your work in a mobile browser; the results should look like this: Forms exercise



Code Explanation:

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 #thanks page.

We add appropriate fields for each piece of submitted information:

  • An input type="text" for the first and last names.
  • A textarea for the shipping address and notes.
  • Inputs of type email and date for the email and date-of-birth fields, respectively.
  • A select for the shipping options.
  • A slider for the rate-our-service field.
  • Checkboxes for "how did you hear of us?".