skip to content

Chapter 8: Forms


Contents of Book Chapter

  • Principles of Form Design
  • Input Controls
  • Form Completion
  • Transaction Structure
  • Input Form Page Layout
  • Visitor Support
  • Visual Design of Form Controls
  • Input Forms and Accessibility

Resources

  • The Humane Interface, by Jef Raskin. Boston: Addison-Wesley, 2000.
  • User-Centered Web Design, by John Cato. Boston: Addison Wesley Longman, 2001.
  • About Face 2.0: The Essentials of Interaction Design, by Alan Cooper. Indianapolis, Indiana: Wiley, 2003.

back to top...

Exercises
(mouseover answer boxes to reveal answers)

Check Your Reading Comprehension

  • If we want to remove a form control from the tabbing order entirely, we put the following attribute in the tag:
    • tabindex="no"
    • tabindex="off"
    • tabindex="-1"
    • tabindex="0"
    • tabindex="99"
    • no tabindex in the attribute
  • Form elements like inputs or checkboxes are called
  • widgets or controls

  • Help that provides documentation based upon what the visitor is attempting to do is termed
  • contextual help

  • What do we call a step-by-step procedure that employs a separate page for each step?
  • wizard

  • Fill in the blanks below with the code necessary to surround the checkboxes with a border, including the label “Hobbies” inset into that border.
  • <form name="inputForm" id="inputForm" >
        < fieldset >
            < legend >Hobbies</ legend >
            <p>Please check all topics of interest: <br />
            <input name="interests" id="interests" type="checkbox"
              value="fishing" />Fishing<br />
            <input name="interests" id="interests" type="checkbox"
              value="golf " /> Golf<br />
            <input name="interests" id="interests" type="checkbox"
              value="tennis" /> Tennis</p>
        </ fieldset >
    </form>

  • Fill in the blanks below with the code necessary to tab through the input elements in the non-standard order shown by the names of the elements.
  • <form>
        Input 3
            <input type="text" tabindex="3"
              name="input3" id="input3"
        Input 2
            <input type="text" tabindex="2"
              name="input2" id="input2" />
        Input 1
            <input type="text" tabindex="1"
              name="input1" id= "input1" />
    </form>

  • Fill in the blanks below with the code necessary to focus the cursor on the field below when the document initially loads.
  • <body
    onLoad ="document.formName.fieldName. focus(); ">

  • Fill in the blanks below with the code necessary to show a non-selectable header for groups of options below.
  • <form name="inputForm" id="inputForm">
        <p>Please select a topic of interest: <br />
        <select name="activities" size="7" >
            < optgroup label= "Hobbies">
                <option value="crafts">Crafts </option>
                <option value="genealogy" >Genealogy</option>
                <option value="home remodeling" >
                Home Remodeling</option>
            </ optgroup >
            < optgroup label= "Sports">
                <option value="golf" >Golf</option>
                <option value="tennis" >Tennis</option>
                <option value="fishing" >Fishing</option>
            </ optgroup >
        </select>
    </form>

  • Fill in the blank below with the code necessary to display a drop-down (as opposed to scrollable) list.
  • <select name="activities" id="activities" size="1" >

back to top...

Critical Thinking Exercises (long answer)

Use vocabulary and concepts from the text to answer the following questions. Provide examples to document your explanation.

back to top...

Hands-on Exercises

  • Pick a public access web site that uses forms. Answer each of the following questions and discuss whether or not the choices made on this site are appropriate for its content and audience.
    • Can you think of any way to reduce visitor effort on the form, whether visually, cognitively, or physically?
    • Did the site use a wizard or a control panel structure? Was the choice appropriate for this site and its intended audience?
    • Is a non-standard tab order used? Is focus set to the first input field upon page load?
    • Did the site provide appropriate instructions and help without providing “too much information”? Should more instruction or help be added to the site? Could some help and instruction be deleted?
    • Are the appropriate widgets used for the appropriate input? For instance, was a list box used when perhaps checkboxes would have been more appropriate? 
    • Deliberately enter invalid data to the form. Were the errors caught by validation procedures? If so, were the error messages clear and non-accusatory?
  • Pick an existing web site on the web and evaluate its forms based on the entire input forms checklist earlier in the chapter. What did the designers do right, and what did they do wrong? Explain your reasoning.
  • Surf the web to find a site that has “killer” forms, and another one that uses forms poorly. Compare and contrast what the “killer” site did well that the other site didn’t do so well. How would you redesign the site that uses forms poorly?
  • After completing any of the previous three analysis questions, trade your personal or group analysis with a friend or fellow student. Discuss the similarities and differences in your analyses. When you came to different conclusions, each of you should explain how you came to your conclusions.
  • Surf the web to find a site that includes a poorly-designed form. Redesign the form and implement the new design using HTML and CSS. Use CSS to integrate the visual look of the form into the look and feel of the site as a whole. Be sure to evaluate your resulting form against the checklist in the chapter summary.
  • Use HTML and CSS to implement a form that contains the following form controls:
    • Book title, up to 70 characters.
    • Author’s first and last name and middle initial.
    • Publisher name, up to 50 characters.
    • Book format (only one can be chosen): hardback, paperback, e-book.
    • Book topic (multiples may be chosen): sports, hobbies, crafts, decorating, health and fitness, remodeling, computers.
    • Comments, with enough space for a fairly long paragraph or two.
    • A submit button using an image that you created yourself.
  • Use CSS to change the typeface, font size, and font color on the author’s name fields and the comments field. Be sure to evaluate your resulting form against the checklist in the chapter summary.

back to top...

Ongoing Case Study Exercise

  • Design and construct a form to gather appropriate information from visitors for one of the following sites. Use CSS to integrate the visual look of the form into the look and feel of the site as a whole. Be sure to evaluate your resulting form against the checklist in the chapter summary.
    • A site specializing in products for newborn babies and their parents.
    • A site for a children’s amusement park, catering to children under the age of twelve.
    • A site selling fishing equipment.
    • A site selling women’s designer clothing.
    • A site promoting tourism for the New York City.
    • A site promoting a non-profit environmental preservation organization.
    • A site promoting a grunge rock band.
    • A site promoting an oldies rock band that specializes in tunes from the late sixties and early seventies.
    • A site selling primitive antiques.
    • A site selling garden plants and supplies.
    • A site advertising an Italian restaurant.
    • A site promoting a small but trendy modern art gallery.
    • A site promoting a large, traditional art museum.
    • A site promoting a museum of natural history.
    • Another site of your choice.
  • Design, construct, and test a form to gather appropriate information from the target audience for your personal website. Use CSS to integrate the visual look of the form into the look and feel of the site as a whole. Be sure to evaluate your resulting form against the checklist in the chapter summary.

back to top...


| Home | General | 1: Introduction | 2: Site Analysis | 3: Navigation |
| 4:Layout | 5: Color | 6: Graphics | 7: Typography | 8: Forms |