Lab Assignment

I.  Learning Objectives:

By the end of this assignment, you will be able to:

1. Explain how html forms work and create the front end of an html form

2. Create forms that include text labels, hidden data and appropriate input controls for the data being entered.

3. Apply CSS to the fieldset, legend, labels and other divisions within the form

4. Submit form data to a processing script

II.  Overview

You will create your own form similar to the customer form you completed in the textbook assignment. You can use that as a template for this assignment. You can also view the following examples: TechnologySurvey.html or StudentPreferences.html.

Your form can be on any topic you are interested in.  You will be sharing your form with the class in the discussion forum this week.

Part 1:  Creating your own form  (22 points)

Name the form:  myForm.html.   You can create the form from scratch or you can copy elements out of an existing form.

Form requirements include:

1)  You must include the following form elements:   12 points

• A text input box with the name and id ="name"     Add the required attribute.  Add the autofocus attribute
• A text input box with the name and id ="address"
• A text input box with the name and id ="city"
• A text input box with the name and id ="state"
• A text input box with the name and id ="zip"
• A tel input box with the name and id ="telephone"    Add the required attribute.  Add a placeholder that displays how the phone# should be entered.
• An email input box with the name and id ="email"   Add the required attribute.  Add a placeholder that displays how the email address should be entered.
• A selection list where you choose the name and id
• A data list and corresponding input tag with a list name that matches the data-list id (you choose the name you want to use)
• At least one group of radio buttons or checkboxes (you need at least 3 checkboxes or radio buttons in the group) 
• At least 1 text area box. 
• A submit form button
• A reset form button
• A hidden field with the  name and id ="mailto".  The value should be your own email address.  Example:  <input type="hidden" name="mailto" id="mailto" value="mailto:lbalbach@nmc.edu">
  NOTE:  This "mailto" will not do anything at this point in time, the information would be for a script that requires it.

• Modify the form tag to include the following:  1 point
  
  <form name="whatever you want" id="whatever you want" action="https://lisabalbach.com/CIT180/Lesson8/FormProcessor.html"   method="get"  >

NOTE:  This script will run and display all the form information to you.

 2)  Make sure you use labels for the text next to the field entry areas.  1 points

3)  Make sure you group areas within the form using <fieldset> elements.  1 point

4)  Make sure you identify sections of the form using the <legend> element.   1 point

5)  Add styling for your form using an internal style sheet or external style sheet (it is up to you).  You should add color, font styles, borders etc to your form to make it look nice (similar to what was done in class).  3 points

6)  Make sure your  form elements are aligned properly using css styling and that you use the box model for your layout .   3 points

7)  Once the form is complete, view it offline.   Make sure you test the form to ensure that it works properly.  Correct any errors and then transfer it to the Internet.

Part 2:  Update your default assignment page  (3 points)

1.  Update the textbook section of the assignment page by adding a Lesson 8 heading and links:

2.  Update the lab section of the assignment page by adding a Lesson 8 heading and links:

3.  Make sure the links work and then email me to let me know your assignment is ready for correcting :)

Grading: