CS 101   Web Construction,  Fall 2010,  Instructor:  Jeffrey Horn ASSIGNMENTS

• Assignment 5  "FORMS and Server-side Scripts"
  • Handed out:   Monday, Nov. 1, 2010
  • Due:      Fri. Nov. 12, 2010 
  • Goals: 
    • Design and implement a web form, as an interface to an existing server-based script (program).
    • Link to a remote, pre-built CSS file.
    • Learn to use various form elements.
    • Learn to be the interface between user and (script) programmer
  • Details:
    1. Create a web page (.html file) containing a <form> that does allows the web user to request a subscription to a newsletter (or magazine, or email digest, etc.).  The user must fill out your form so that the server-side script will send an email to you, using a "hidden" input for the "recipient" field.)
    2. The CS 101 A5 script is at http://cs.nmu.edu/~jeffhorn/cgi-bin/A5.cgi  Have your form's action attribute point to this script, and use "POST" for the value of the method attribute.
    3. Your form should ask the user for some data needed for the subscription, such as "firstname", "lastname", "streetaddress", "city", "zipcode", "phone", "card_type", etc.
    4. To run the CS101 A5 script, your web page will need to send these named data fields to the server-side script:
       1. firstname:  A text string with the user's first name.
       2. lastname:  A text string with the user's last name.
       3. streetaddress:   A text string with the street address.
       4. city:   A text string with the user's last name.
       5. zipcode:  A text string with the user's zip code.
       6. phone:  A text string with the user's phone number.
       7. cardtype:  Use a "select" element  or "radio" buttons to let the user choose among "MasterCard", "VISA", "American Express", or "Diners Club".  The value for each of those choices should be MC, VISA, AMEX, or DINERS, respectively. 
       8. duration:  Let the user choose "6 months", "1 year", "2 years", or "lifelong".   Use radio buttons or a select list for this.  Send as values "6", "12", "24", "10000", respectively.
       9. guess:  A text string with a number in it.  This will be the users guess as to the "Mystery Number"!
       10. message:    A text string that will be included in the body of the email message sent.  The user can use this to send a note.   Use a "text area" element for this.
       11. recipient:  A real email address (e.g., "jeffhorn@cs.nmu.edu").   This should be hidden.
    5. Note that the names above are case-sensitive.
    6. Use <fieldset> and <legend> elements to group the personal information, course information, and submission information into separate boxes (or you can use some other grouping that makes sense; just make sure to use at least two fieldset-legend combinations.
    7. Be sure to use the css file at:  http://cs.nmu.edu/~jeffhorn/css/forms.css  Use the <link> element.
    8. When your form page is working, send me the URL by email.  Include your best guess of the mystery number!  Also, don't forget to put "CS 101 A5" at the beginning of the SUBJECT line of your email message!