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

Turn in:

  • A zip file 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

  • Your form should have the name and id attributes assigned values.
  • 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 a table to arrange the labels and form elements in your page. Remember that the <form> tag always goes outside of the <table> tag.
  • 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>First Name: <input ............. /> </label>
    • Example 2: <label for="LastName">Last Name: </label> .... <input name="LastName" id="LastName" ..... />
  • 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 if the user uses the following:
    • 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 98
      • Windows NT
      • Windows 2000
      • Windows XP
      • Windows (other)
      • Macintosh
      • UNIX
      • Linux
  • Use a set of radio buttons to determine if the user is providing a comment, question or criticism
    • 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
  • 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
In addition to these requirements, the form should:
  • Be logically arranged, and aestetically pleasing -- meaning you will have to use a table to help control placement of the elements.
  • Should be well-formed (as we have been doing all semester)... quotations, closed tags, proper nesting, etc.
  • All text fields should be of the character length specified above.
  • All form elements should be appropriately named (form elements that are not named do not get submitted when the submit button is pressed).
  • You should try uploading the form to your web location and see it you can get it to send an email to your email address.

Expand/Collapse Section ImageFinalization

Example of an acceptable form page:
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!