Differences

This shows you the differences between two versions of the page.

--- eg-259:homework:3 [2011/01/14 13:00] – external edit 127.0.0.1
+++ eg-259:homework:3 [2012/02/16 13:22] (current) – eechris
@@ Line 1: / Line 1: @@
 ====== Forms and Web User Interfaces ======
-**Adapted from**: Robert W. Sebasta, Programming the World-Wide Web, 3rd Edition, Addison Wesley, 2006. **Supporting**: [[eg-259:lecture3|Lecture 3]].
+**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 XHTML document that has a form with the following controls:
+  - Create, test and validate an HTML5 document that has a form with the following controls:
-    - A text box to collect the user's name
+    - 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
@@ Line 18: / Line 18: @@
   - 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.