CS-081 Assignment 8

For this assignment, you are to put it all together: in addition to practicing using forms, you are to fix up your web site so that it acts as a coherent site.

1. Add a separate web page to your site with a “contact” form.

   Create a new page by copying the template.xhtml file provided at the beginning of the semester; name it contact.xhtml, and put it in the top-level directory of your web site. Be sure to give it meaningful title and h1 elements.

   Your site should now have three pages: the index page for the site, the index page for the Blog, and the new contact page. Add the same unordered navigation list in all three pages if it is not already there. The list is to have links to the three pages in your site, plus links to the W3C XHTML and CSS validators.

   Make sure all the links work. Do not worry about how the three pages on your site look yet.

2. Build the contact form.

   Make an elaborate contact form that includes as many different form elements as you can, but make the form “make sense.” For example: use a text input for the user to enter his/her email address; use a password input; use a select for the subject of the message; use a textarea for the message body; use radio buttons to tell how urgent the message is; use checkboxes tell whether a reply is needed and whether to add the user to your mailing list; use a file input so the user can upload more information related to the message. These are suggestions; feel free to use the various elements for whatever you like.

   Be sure you use label elements for all the controls and that they are set up correctly.

   Don’t forget the Submit button!

   Download echo_form_data.zip to your web site and unzip it there, which will give you a file named echo_form_data.php. Use this file as the value of the action attribute of your form tag. This is the script file that just displays the form data that it receives in a table. It will work with either the GET or POST method, so you may specify either value for that attribute of the form tag. Finally, to support the file upload feature (which the script does not do much with), you need to add the enctype attribute to the form with the value of "multipart/form-data".

   All controls in a form have to be nested inside some other element: use one or more fieldset elements for this; add a legend element to each fieldset.

   Verify that the form works correctly. If it is too messy to work with at this stage, it is all right to do the next step and then to test your form.

3. Style the form.

   Link your contact page to either the single stylesheet you have been using all along, and/or to a new stylsheet that is used just for the form. Use the table-cell value for the display property of various elements to get the form laid out as two columns: one for labels and one for input elements. You will have to wrap each label and its corresponding control element inside another element, such as a span or div to make the pairs of “cells” go into separate table rows. Use background colors, borders, padding, and margins to make the form look good and to position it where you want it on the page.

4. Pimp Your Ride!

   OK, there’s not much time for this, but see what you can do to give your whole web site a consistent look and feel. Make the navigation list and page heading look the same across all three pages for starters. Then do whatever else you can to show off your XHTML and CSS skills. As long as everything validates, you can use non-standard extensions like -moz-border-radius and -webkit-border-radius if you like.

I will check your assignment by copying it from Maple to Babbage; to submit the assignment, send me an email with your name in the message body saying it is ready for me to look at. Send your email to me by midnight on the due date (December 16). My email address is:

The Subject Line of your email must say CS-081 Assignment 8, exactly like that, in order to avoid my spam filters.