Lab 3: Forms

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.

If you already use VS Code: instead of working directly on the web server, you could use VS Code with the Remote - SSH extension.

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 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. Test your form -- when you submit the form, you should see the parameters being sent from the form in the URL.
6. Add a link to your form on your cs335 web page, under the "Submissions" heading.

Styling Your Form (25 pts)

• Define one style for a specific type of input element.
• Leverage Bootstrap Forms to make your form look more professional for at least two elements/inputs of different types. For example, use Bootstrap to style the buttons and the radio or checkboxes

Grading (100 pts)

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

• Valid CSS, adheres to specifications (10 pts)
• Valid HTML5, appropriate headings, layout, labeling, form (15 pts)
• Form inputs (45 pts)
• Link under Submissions (5 pts)
• Styling the form (25 pts)