<%@LANGUAGE="VBSCRIPT" %><% Response.CacheControl = "no-cache" %>
Exercise #6 (Due End of Period)

Turn in:

  • A folder named your "Lastname, Firstname" containing:
    • form.html

Details:

This exercise is designed to make you more familiar with forms and form creation. Although the intricacies of connecting the form to a usable source, such as a CGI script or a database, is beyond the scope of this course, you will nonetheless create a form that sends its data to your email address. You will create a feedback form that conforms to the following:

Expand/Collapse Section ImageExercise Specifications

  • The form tag
    • Your form should have the id attribute assigned a value.
    • You should set the action attribute of the form tag equal to "http://cg356.tech.purdue.edu/cgt141/formPost.asp"
    • You should use post as the method attribute of the form tag.
       
  • You should use an unordered list <ul> and CSS to arrange the labels and form elements in your page.
     
  • Every form element should have a <label> associated with it.
    • This is a required accessibility feature - Accessibility validation will fail without it.
    • Example 1: <label for="LastName">First Name: <input ............. /> </label>
    • Example 2: <label for="LastName">Last Name: </label> .... <input name="LastName" id="LastName" ..... />
    • In each label, put an asterisk inside of span tags to show that the field is required: <span>*</span>
       
  • All form elements should be appropriately named (form elements that are not named do not get submitted when the submit button is pressed)
     
  • Include an input text box for each of the following (set the type attribute equal to text):
    • First Name [size= 40] [maxlength=40] [name=FirstName] [id=FirstName]
    • Last Name [size= 40] [maxlength=40] [name=LastName] [id=LastName]
    • Address 1 [size= 40] [maxlength=60] [name=Address1] [id=Address1]
    • Address 2 [size= 40] [maxlength=60] [name=Address2] [id=Address2]
    • City [size= 40] [maxlength=60] [name=City] [id=City]
    • Zip [size=10] [maxlength=10] [name=Zip] [id=Zip]
    • Email [size= 40] [maxlength=60] [name=Email] [id=Email]
       
  • For the State, use the following drop down menu code:
    • State [name=State] [id=State]

  • For the country, use the following drop down menu code:
    • Country [name=Country] [id=Country]

  • Use a set of checkboxes to see which of the following Operating Systems the user has used:
    • input tag with the type attribute set to checkbox
    • OS [name=OS] [id=OS]
      • An id cannot repeat on the page. While all of the checkboxes will have name="OS" associated with them, you will need to have unique id's, such as: id="OS1", id="OS2", id="OS3", etc
    • Be sure to assign the proper values to the value attribute of the input tag
      • Windows 3.1
      • Windows 95
      • Windows 98
      • Windows NT
      • Windows 2000
      • Windows ME
      • Windows XP
      • Windows Vista
      • Windows 7
    • Put two checkboxes per <li> tag. Since there are 9, you will need 5 <li> tags and use CSS to align them properly.
       
  • Use a set of radio buttons to determine if the user is providing a comment, question or suggestion
    • input tag with the type attribute set to radio
    • CommentType [name=CommentType] [id=CommentType]
      • Again, an id cannot repeat on the page. While all of the radio buttons will have name="CommentType" associated with them, you will need to have unique id's, such as: id="CommentType1", id="CommentType2", etc
    • Be sure to assign the proper values to the value attribute of the input tag
    • Put all 3 radio buttons in one <li> tag.
       
  • Use a textarea form object to gather the user's text input (their comment, question or criticism)
    • Comment [name=Comment] [id=Comment] [rows=4] [cols=60]
       
  • Include the ability to attach file documents (<input type="file">)
    • FileName [name=FileName] [id=FileName]
       
  • Include a submit and reset button.
    • Be sure to assign values to the following attributes: value
       
  • CSS
    • /* Format the way unordered lists and list items appear */
      • ul
        • list-style:none;
        • margin-top:5px;
      • ul li
        • display:block;
        • float:left;
        • width:100%;
        • height:1%;
    • /* Label tags in general */
      • ul li label
        • float:left;
        • padding:7px;
        • color:#6666ff;
    • /* input, textarea, and select tags */
      • ul li input, ul li textarea
        • float:right;
        • margin-right:10px;
        • border:1px solid #ccc;
        • padding:3px;
        • font-family: Georgia, Times New Roman, Times, serif;
        • width:60%;
      • li input:focus, li textarea:focus
        • border:1px solid #666;
      • ul li select
        • float:right;
        • margin-right:10px;
        • border:1px solid #ccc;
        • padding:3px;
        • font-family: Georgia, Times New Roman, Times, serif;
        • width:62%;
    • /* Format the fieldset, border around outside, and legend title */
      • fieldset
        • padding:10px;
        • border:1px solid #ccc;
        • width:500px;
        • overflow:auto;
        • margin:10px;
      • legend
        • color:#000099;
        • margin:0 10px 0 0;
        • padding:0 5px;
        • font-size:11pt;
        • font-weight:bold;
      • fieldset#userInfo
        • position:absolute;
        • top:60px;
        • left:20px;
    • /* Red asterisk */
      • label span
        • color:#ff0000;
    • /* Submit button */
      • fieldset input#Submit
        • float:left;
        • background:#E5E5E5;
        • color:#000099;
        • border:1px solid #ccc;
        • padding:5px;
        • width:150px;
    • /* Reset button */
      • fieldset input#Reset
        • float:right;
        • background:#E5E5E5;
        • color:#000099;
        • border:1px solid #ccc;
        • padding:5px;
        • width:150px;
    • /* Checkboxes */
      • input#OS1, input#OS2, input#OS3, input#OS4, input#OS5, input#OS6, input#OS7, input#OS8, input#OS9
        • float:right;
        • margin-left:5px;
        • margin-top:-2px;
        • padding:0px;
        • width:auto;
      • label#OSL2, label#OSL4, label#OSL6, label#OSL8
        • float:right;
        • margin-top:5px;
        • padding:0px;
        • width:auto;
    • /* Radios */
      • input#CommentType1, input#CommentType2, input#CommentType3
        • float:right;
        • margin-left:5px;
        • margin-top:-2px;
        • padding:0px;
        • width:auto;

Expand/Collapse Section ImageFinalization

Example of exactly how your form page should look:
 
 
Example of an acceptable form page

 
Example of formPost.asp after a successful submission of data:
Example of formPost.asp after a successful submission of data

Note: This exercise is to be done by hand/hard-coding. No editors!