Assignment 1 - CSS

Create a single HTML file that contains JavaScript, CSS and a registration form using form elements. The form asks the user's name, home address and mailing address. Make sure of the following:

  1. Set the action attribute of the form tag to https://ics415.com/assignments/name-value-pairs.php and use the POST method.
  2. Include a hidden input tag named "My-Name" with value equal to your first and last name.
  3. Make the name and id attributes the same for your input tags. Give them appropriate names.
  4. Use CSS to format your form nicely. Do something with the background. Pay attention to fonts and the sizes of the text boxes. Use label tags. Include a header and a footer.
  5. Submit your file as an attachment below.

Your registration form should ask:

  1. Name: Input first name, middle name, last name, and generational suffix in separate text boxes.
  2. Home address: Input house number, (optional) street direction (e.g., E, W, N, S), street name, unit, city, state and zip code separately. Use text boxes for all of them except the state. For the state use a drop down menu.
  3. Mailing address: Input the street address, city, state and zip code separately. The street address in one text box, the city in a text box, state as a drop down menu and zip code in a text box.
  4. Above the mailing address include a checkbox if the mailing address is the same as the home address. If the checkbox is checked, the mailing address part of the form is populated from the home address fields. If the checkbox is then unchecked, the mailing address form fields are cleared.

Make sure you incorporate the following Validation Checks:

  1. The first name, last name, street name, city, state, zip code and mailing address fields must be filled in.
  2. The zip code must be 5 digits.
  3. The validation check is performed when the user presses the submit button. An alert box should appear indicating the missing fields as a list, one error per line.
  4. Red asterisks should appear above or next to the fields that are in error.
  5. When the user fills out the form correctly, the alert message should say "Thank you for your order" and any error asterisks on the form should be cleared.

Tidy up the CSS based on what you learned in the second module.:

  1. Create standard semantic blocks.
  2. Place all CSS code in a separate CSS file.
  3. Use selectors.
  4. ...

Your form should basically start out something like this with the form action=https://ics415.com/assignments/name-value-pairs.php and the My-Name hidden input. Enter a name and click Submit to see.