Skip to main content.

Lab 2: HTML Forms

Goals

After completing this lab, you should be able to

Objective: Fixing Previous Errors

Fix any problems (typically invalid HTML) in your web pages before starting this lab so that the issues don't propagate.

Objective: 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. You can copy one of your other files and update it for this assignment.

    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. It's easier to have a separate file so that you can reuse it.

    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:
    1. (5 pts) The customer's name
    2. (5 pts) The type of bread: white bread, wheat bread, or wrap, 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. (You may have an error because your form doesn't "go anywhere", which is fine for this lab. We'll have our forms "go somewhere" tomorrow. Again, if there are errors in Bootstrap, you can ignore those.)
  5. Add a link to lab2_form.html on your cs335 web page, under the "Submissions" heading.

Take it to the Next Level

Leverage Bootstrap Forms to make your forms look more professional.

Grading (75 pts)

This lab is due tonight at 11:59 p.m.