Adapted from: Robert W. Sebasta, Programming the World-Wide Web, 3rd Edition, Addison Wesley, 2006. Supporting: Contact Hour 4.

1. Create, test and validate an HTML5 document that has a form with the following controls:
   1. A text field to collect the user's name
   2. Four check boxes, one each for the following items:
      1. Four 100-Watt light bulbs for £1.39
      2. Eight 100-Watt light bulbs for £2.49
      3. Four 100-Watt, long-life light bulbs for £2.29
      4. Eight 100-Watt, long-life light bulbs for £4.29
   3. A collection of three radio buttons that are labeled as follows:
      1. Visa
      2. Mastercard
      3. Switch
2. Add a submit button labeled checkout and a reset button labeled cancel to the form created in Exercise 1.
3. Add a menu to the form created in Exercise 1 to select a delivery method. E.g. choice of next day delivery, 1st class post, free post, courier, etc. Make 1st class post the default delivery method.
4. Add <label for> elements to the text fields added in Exercise 1 and link them to suitable id attributes in the associated widgets.
5. Add a text area to the form created in Exercise 1 to collect user feedback.
6. Add a HTML5 attribute placeholder to the name text field and provide a suitable user hint.
7. Add the HTML5 required attribute to the name text field.
8. Add the HTML5 autofocus attribute to put the initial form focus on the name text field.

• If you haven't already, obtain and install the Firefox web browser and install the Firebug extension. Visit the example form, add some data and submit it. Use Firebug to examine the HTTP request and response.

More Homework Exercises