Skip to main content.

Lab 2: HTML Forms

Goals

After completing this lab, you should be able to

Creating a Form (75 pts)

In this lab, you'll create a form that allows users to customize a sandwich.

  1. In the submissions directory, create a file called lab2_form.html.

    As always, write the page in well-formed HTML. Also, use appropriate CSS for the page. For this assignment, you can either have the CSS embedded or as a separate file. I find it easier to have a separate file because I use the WebDeveloper tool.

    For this page's style, use a sans-serif font and make sure the text is readable and well-organized. Write one style for a specific type of input element. Other styles are up to you, but make sure the page is readable.

  2. Add appropriate titles and headings to the document.
  3. Inspired by my years as a Subway Sandwich Artist™, create a form using appropriate labels and input fields for each of the following inputs (If you have less than four different types of input fields, think about if there's a more appropriate input choice.):
    1. (5 pts) The customer's name
    2. (5 pts) The type of bread: white bread, wheat bread, or roll, default white bread
    3. (5 pts) One "base": turkey, ham, roast beef, tuna, or veggies, no default
    4. (5 pts) One cheese: swiss, american, provolone, or none
    5. (10 pts) As many as the customer wants of condiments and veggies: mustard, mayo, oil, vinegar, lettuce, tomato, pickles, onions, hot peppers
    6. (5 pts) For here or to go; default is here.
    7. (5 pts) Customer Notes
    8. (5 pts) Clear and submit buttons
  4. Validate your HTML and CSS. Fix any problems.
  5. Add a link to lab2_form.html on your cs335 web page, under the "Submissions" heading.

Grading (75 pts)

This lab is due tonight at midnight.