\n"); } else { header("Content-type: text/html; charset=utf-8"); } ?> CS-081 Assignment 10

CS-081 Assignment 10

Introduction

For this final assignment, you are to implement a form on your web page and to use CSS to format and position it.

If you have not done so already, you are also to position the div containing the validation links at the bottom of each web page.

This assignment includes an optional component that lets you try your hand at writing server-side PHP code to process your form data.

Lab Activities.

  1. If you did not yet implement the positioning of the footer component of your web pages, do so now.

    See the Assignment 8 web page for details on this requirement. (I added it late to that assignment, so I didn’t actually require it then.)

  2. Add a form to your Blog.

    You will need a form element that has an action attribute with the value: http://babbage.cs.qc.cuny.edu/courses/cs081/form_script.php. You may specify either the get or post value for the method attribute, or you could simply omit it and use the default value (which is post).

    Use a fieldset (and a legend for it) to serve as a container for all the form elements.

    Each input element, except the Submit button, must have an associated label; labels should go to the left of (or above) text inputs, but to the right of checkboxes and radio buttons.

    The default set of inputs is:

    • A text input for the user’s email address
    • A text input for the user to enter a link to a website.
    • A password input
    • Two checkboxes
    • A group of three radio buttons, with one of them initially checked
    • Either a submit input or a button of type submit.

    You may change the labels and names for the inputs if you like, and you are free to add other elements to your form as well.

    Before doing anything else, test your form to be sure it works. Experiment by typing different things into the text/password fields; check and uncheck different combinations of checkboxes; test each of the radio buttons. Look at the names and values displayed by the form_script.php page when you submit the form, and be sure (a) the form works and (b) you understand how the name-value pairs are being gathered from the form and sent to the server.

  3. Format and layout your form.

    Once the form is working, use your CSS skills to position it and lay it out so it looks like this:

    screenshot of form

    Well, it doesn’t have to look exactly like that, but do make it so the form is basically square with each input and its label set apart from other form elements so that it is easy to read and makes sense to users. For example, as mentioned in class, it would be all right if you put the labels for the text and password inputs above them instead of to the left of them.

  4. Optional: Write your own form processing program in PHP.

    To do this, you will need to change the action attribute of your form to point to an XHTML file that you write. The conventional place to put such pages is a subdirectory named scripts. Whatever mix of PHP and XHTML code you put on that page is what will be displayed when you submit your form.

    Feel free to experiment, but you might want to start by trying to generate two different greeting messages depending on whether the email address submitted is a Queens College email address, as demonstrated in the last class meeting.

Submit The Assignment

Once you have set up your web site and tested that both the XHTML and CSS links at the bottom of the page give you no warnings and no errors, log out of your account so your site will be copied to the server. I will copy your site from the server to the computer in my office (babbage) to check it out.

Remember: even if your site validates perfectly, you still have to make sure that all the CSS rules actually work as you intended. Testing your web page and fixing any unexpected appearances is a critical component of all the assignments for this course.

When you finish your assignment, send me an email message telling me that it is ready. Use CS-081 Assignment 10 as the subject line. Make it look just like that to avoid my spam filters. Send the email to: vickeryatbabbage.cs.qc.cuny.edu.