Work | MLIS Portfolio | Lit & Art | Outdoors & Travel | Personal | Home  

LIBR 246

Minor Assignment 2:
Forms, Shopping Carts & Navigation Menus

  1. Set up a form that contains text fields, textarea, select (drop down boxes), radio buttons, and checkboxes.
    • When the form loads have the cursor appear in the top text field (maybe a name field)
    • You must set up the form so that the user is required to make a selection from a checkbox, a radio button, and a drop down box
    • The user must fill in an e-mail address
    • One text field must only accept numbers
    • Have the form do a little calculation!
    Note: the cgi part is not part of the assignment.
  2. Time to have some fun and work with other people's programs! Set up a shopping cart using the free program from Mearns (http://mearns.org.uk/cart/) This is a nice little shopping cart program programmed in Javascript and easy to set up.
    Pay attention to detail. You should be customizing this so that the user does not see any code.
  3. Set up a site map as a drop down menu using a select box. When the user makes a selection the Javascript will automatically go to the URL.
  4. Incorporate the material developed in Question 3 into several Web pages using a .js file so that it can automatically load when the page is loaded.

Examples

The programs are incorporated into a site based on my Trail Center site (http://www.trailcenter.org). Please see the index page to navigate through the entire site.

  • Part 1: Trail Center membership form. This form is based on Dr. Main's Pick-A-Puppy form.
  • Part 2: Trail Center publications catalog. Modified Mearns' shopping cart. Note: form calculates the order but will not actually post it to a CGI file.
  • Part 3: Trail Center Outdoor Recreation Guides. A site map of the Guides section is incorporated into a dropdown menu (replacing the normal section navigation). In addition, external JavaScript files create the header, standard navigation menu and contact information, and also footer for all pages below the index page.