Web Form Exercise


Here’s the scenario. You are the web designer in charge of creating the entry form for the Forcefield Sneakers “Pimp your Shoes” contest. The copy editor has handed you a sketch on the form’s content, complete with notes of how some controls should work. There are sticky notes from the programmer with information about the script and variable names you need to use.

Your challenge is to turn the sketch into a functional online form. Use the provided entry form document and create the form.


  1. Step 1: Text Fields
  1. Put everything after the intro into a <form> element. The programmer has specified the action and method. For action use “http://www.learningwebdesign.com/contest.php”
  2. Create a fieldset that contains the Name, City, State and My shoes” labels. Don’t forget to set the section title as the legend.
  3. Markup the form fields as an ordered list.
  4. Add the appropriate input fields and be sure to name them (for the text area, use story for the name).
  5. Tie each label to it’s form control using the for/id label method
  • Step 2: Radio Buttons & Check-boxes
    1. Group the color, features and size questions in a fieldset with the legend “Custom Shoe Design”.
    2. Create another fieldset just for the color options, using the description as the legend as shown here. Also mark up the options as an unordered list.
    3. Now add the form controls using radio buttons for color and check-boxes for the features, associating each with it’s respective label.
  • Step 3: Adding a Menu
    1. Delimit the Size question in a fieldset with “Size” as the legend and the line as a paragraph.
    2. Insert a select menu element with the shoe sizes (5-13), and explicitly associate it with its label, using “for/id”.
  • Step 4: Finishing Touches
    1. Save and preview the document, making sure the form works correctly. (If you set the action and method correctly the form should work correctly).