CS 101   Web Construction,  Winter 2008,  Instructor:  Jeffrey Horn ASSIGNMENTS

• Assignment 5  "FORMS and Server-side Scripts"
  • Handed out:   Monday, Nov. 3, 2008
  • Due:      Wed. Nov. 19, 2008 
  • 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 submit a CS 101 assignment by filling out a form so that the server-side script will send an email to me, at "jeffhorn@cs.nmu.edu" (and not "jhorn@nmu.edu")
    2. The CS 101 submit script is at http://cs.nmu.edu/~jeffhorn/cgi-bin/FormMail.cgi  Have your form's action attribute point to this script, and use "POST" for the value of the method attribute.
    3. To run the CS101submit script, your web page will need to send these named data fields to the server-sdie script:
       1. firstname:  A text string with the user's first name.
       2. lastname:  A text string with the user's last name.
       3. NMUid:  A text string with the user's NMU id.
       4. semester:  A text string with either "F" or "W".   Suggestion:  use a radio button for this.
       5. course:  the text string "CS101"  (use a "hidden" input for this)
       6. section:  sends either "2" or "3" but the user chooses between "MW" and "TR", respectively.  Use radio buttons or select list for this.
       7. assignment:  Let the user choose, and send one of the strings "A0" through "A9".
       8. url:  the url of the user's assignment being submitted (e.g., "http://myweb.nmu.edu/~jhorn/CS101/A3/a3.html")
       9. color:    Send a hex number (e.g., "#004400"), but the user's choices (use a "select" list) must show the actual color.   Give the user at least a dozen choices.  There are a number of ways to do this.  Using a <select> element is nice, but hard (extra credit to those who get it to work).  Here is another way you can do this (with radio buttons):
       10. message:    A text string that will be included in the body of the email message sent to me.  The user can use this to send me a note (e.g., why it is late, etc.!)
       11. recipient:  A real email address (e.g., "jeffhorn@cs.nmu.edu").  This should be hidden.   Do not put "jeffhorn@cs.nmu.edu" into the hidden "email" field until you are ready to submit your assignment!   I do not want to be receiving "practice" submissions!   Use your own email address to test your code until you are ready to submit it!  
    4. Note that the names above are case-sensitive.
    5. 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.
    6. Be sure to use the css file at:  http://cs.nmu.edu/~jeffhorn/css/forms.css  Use the <link> element.
    7. When your form page is working, use it to submit the URL for this assignment!