====== Forms and Web User Interfaces ======

**Adapted from**: Robert W. Sebasta, Programming the World-Wide Web, 3rd Edition, Addison Wesley, 2006. **Supporting**: [[eg-259:lecture3|Contact Hour 4]]. 

===== Exercises to Illustrate Forms =====

  - Create, test and validate an HTML5 document that has a form with the following controls:
    - A text field to collect the user's name
    - Four check boxes, one each for the following items:
      - Four 100-Watt light bulbs for £1.39
      - Eight 100-Watt light bulbs for £2.49
      - Four 100-Watt, long-life light bulbs for £2.29
      - Eight 100-Watt, long-life light bulbs for £4.29
    -  A collection of three radio buttons that are labeled as follows:
       - Visa
       - Mastercard
       - Switch
  - Add a submit button labeled ''checkout'' and a reset button labeled ''cancel'' to the form created in Exercise 1.
  - 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.
  - Add ''<label for>'' elements to the text fields added in Exercise 1 and link them to suitable ''id'' attributes in the associated widgets.
  - Add a text area to the form created in Exercise 1 to collect user feedback.
  - Add a HTML5 attribute ''placeholder'' to the name text field and provide a suitable user hint.
  - Add the HTML5 ''required'' attribute to the name text field.
  - Add the HTML5 ''autofocus'' attribute to put the initial form focus on the name text field.


===== Further Exercise =====

  * If you haven't already, obtain and install the [[http://www.mozilla-europe.org/en/products/firefox/|Firefox web browser]] and install the [[http://www.getfirebug.com/|Firebug]] extension. Visit the [[/~eechris/eg-259/examples/lecture3/popcorn.html|example form]], add some data and submit it. Use Firebug to examine the HTTP request and response. 

----

[[eg-259:homework:home|More Homework Exercises]]