Assignment: HTML Forms

You will create a an HTML form based on a paper form for the "Dado Tea Lunch Special".

• Your first task is to create a valid HTML5 document that contains a form that represents the choices available for the Dado Tea Lunch Special.
• Your second task is to apply CSS rules to improve the presentation of the document

Dado Tea is a local establishment with two locations, one in Harvard Square, across the street from the 53 Church Street Computer facility.  Their food is delicious.

Lunch Special Menu (photo):

Getting Started

Download the lunch_special.zip file.  The file structure is:

lunch_special
|-- form.css
`-- form.html

Submission - 2 Parts:  URL and ZIP file

You'll have two submissions -- one so we can see your work "live" on the course web hosting server, and the other so we have the ZIP file of your work.

1. URL to your space on the course web hosting server.  For the submission for this assignment, you will publish your exercise on the course web hosting server.
   Working on the course web hosting server. Use the obscurely named folder in yourpublic_html directory that will contain your work for the course. The reason for the obscure name is to prevent intentional or unintentional browsing via the web of your work by others. For example, the user John Harvard might create a folder named VeRiTas_1636.
   You will submit your URL as a separate ungraded assignment -- that's the best way we can get both parts of your submission.
2. Zip File.  You will work on these files and zip them back up to submit your work (please keep the file names the same).
   You will submit your zip file as an file upload that is part of another assignment -- Submit Your ZIP file For "HTML Forms".

Markup Requirements

The purpose of the assignment is to focus on creating the different types of form input elements (input text, choose one, choose all that apply, pull-down menu, submit button) – using appropriate name, value and id attributes for them, as well as using the label element to associate text labels with these input elements.  Any type of Javascript integration in the form is left to a future exercise and is not part of this exercise.

• File. Edit the form.html file for your markup. .
• Validation:  Your markup should validate as HTML5 with no Errors.  Use the Nu Html Checker at:
  http://validator.w3.org/nu/
• CSS. Include a link element that refers to the form.css CSS file. You will edit this CSS file the next part of this assignment.
• Form Markup.
• Parameter names and values. You choose the parameter names and values for the form input elements.
• Action of form. Use
  action="https://cscie12.dce.harvard.edu/echo"
  in the form element.
• Method. Use post as the method attribute value for the form element.
• Fieldset and Legend. Use fieldset and legendelements to group the form into sections
• Labels. Create a label element for all text, radio, and checkbox input elements
• Days and Sandwiches. It is OK to list all the days of the week as the paper form does. To only allow the "Friday" choices to be available on a "Friday" is a type of form validation that is beyond the scope of this assignment (as are other types of form validation and total price computation)
• Input types.
• Text input for name
• Radio buttons for here/to go, sandwich choice, snacks
• Checkboxes for gluten free and large drink choices
• Pull-down option for drink choice
• Drinks.
• Use optgroup elements to group the drink choices. In the example, I chose to group by "Black Tea", "Green Tea", and "Coffee".
  
• The example shows the "Large Drink" choice implemented as a checkbox. You may replicate this or use a radio group with "Regular" and "Large" choices.

Example HTML Form:

Screenshots are provided for clarity and helpfulness -- it is not expected that you will reproduce these exactly.

Presentation (CSS) Requirements

You will create a CSS stylesheet that will be applied to your markup document. The purpose of this part of the exercise is to begin learning how to author CSS by writing style rules for element selectors. We are expecting stylesheets that have a relatively small number of basic style rules whose effect is to simply improve the overall presentation of the markup documents.

• Files.  Use the form.css
• CSS Validation. Your CSS files should validate (CSS level 3; no errors; warnings are acceptable) with the W3C CSS Validation Service at:
  http://jigsaw.w3.org/css-validator/ (CSS level 3; no errors; warnings are acceptable).
• Small number of CSS rules (4-6) that use element selectors to define a small number (8 to 12) property/value pairs. We are expecting each stylesheet document to use element selectors to specify 4 sets of style rules and at least or so CSS property/value pairs. For example, the screenshot example has 20 property/value pairs defined.
• Screenshot examples are not meant to be reproduced exactly. The example screenshots are just my samples, and are not meant as a rigid guide to be reproduced exactly. Feel free exercise your own creativity here, and not be bound by mine.
• What we don't care about for this exercise.
• Using "class" and "id" selectors. Using "class" and "id" selectors is not required. For now, stick to the basic element selectors.
• Numerous and elaborate CSS rules. We're really looking for a small number as described above. You won't be penalized for doing more, but you won't be given more points for writing more!