Skip to main content.

Lab 3: Forms

Goals

After completing this lab, you should be able to

Objective: Set Up

I don't have any starter files for you for this lab. You can create your own git repository if you'd like, to make it easier to work on files.

ssh into a lab machine and then run labhelp so that I can keep track of the help queue.

Forms Lab FAQ

Objective: Creating a Form (75 pts)

In this lab, you'll create one form that allows users to customize a sandwich (i.e., all input/data for the sandwich is within one form element).

  1. In your cs335 directory, create a file called form.html. You can copy one of your other files and update it for this assignment. (Heads up: you'll be using Bootstrap.) I don't want you to be intimidated by creating a web page from scratch.

    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, but you might not want to reuse it.

    For this page's style, use a sans-serif font and make sure the text is readable and well-organized. (When we've been playing with CSS, the pages have not necessarily been readable, but this one should be.) You'll do more styling in the next section.

  2. Add appropriate titles and headings to the document.
  3. Inspired by my years as a Subway Sandwich Artist™, create a form. The form's action should be "", as in many of the examples, and the default method of get is appropriate.
  4. Create 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 with clear/easily understood labels
  5. When you hit the "submit" button, you should be on this same page, but in the URL, you should see the parameters passed for each of your inputs in the query string. Try different input combinations to see how they affect the query string.
  6. 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.)
  7. Test your form -- when you submit the form, you should see the parameters being sent from the form in the URL.
  8. Add a link to your form on your cs335 web page, under the "Submissions" heading.

Styling Your Form (25 pts)

Grading (100 pts)

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