HTML Survey Basics

The <FORM> Tag

In HTML, every form must start with the <form> tag, and end with the </form> tag. Within the starting <form> tag, you can specify additional information on how to handle the form such as the URL to direct responses, method of sending the data, and target frame to receive the result.

For Example:

<FORM METHOD="POST" ACTION="survey.cgi">

The <FORM> tag must be included in the body of the HTML document such as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
   <head>
      <title>Title of Survey</title>
</head>
   <body bgcolor="#FFFFFF" text="#000000">
      <form action="survey.cgi" method="POST">

            Questions and text here...

      </form>
   </body>
</html>

Item Formatting

Your survey will probably include items of different formats including:

Text Box

Allow you to get a single line of text information.

Example of a single-line open end, or text field:


Please enter your name:
 

The code for this text field:

Please enter your name:
<input type="text" name="UserName" size="35" maxlength="50" value="">

The parameters and their functions are:

Text Area

Useful for collecting large amounts of text.

Example of a text area:

Insert your resume in the box below:

 

The code used to produce the text area:

Insert your resume in the box below:
<textarea name="Comments" cols="60" rows="6"></textarea>

The text area, by default, will have a vertical scroll bar (shown only when necessary) to accommodate large text. Also, text will be automatically wrapped from one line to the next. The line wrapping can be turned off. For examples of line wrapping see the following:

Checkboxes

A common form of multiple-response item uses the checkbox INPUT tag. For example,

Please indicate the sources you use to locate job applicants:
Newspaper
Recruiters
Web Resume Banks
Magazines

The HTML code used to generate this question looks like this:

<p>
<input type="checkbox" name="AppSource" value="1">Newspaper
<input type="checkbox" name="AppSource" value="2">Recruiters
<input type="checkbox" name="AppSource" value="3">Web Resume Banks
<input type="checkbox" name="AppSource" value="4">Magazines
</p>

The Input type specifies which type of response choice to use. In this example, we used "checkboxes". The name="AppSource" parameter indicates the name of the field that will be returned to the software when the form is submitted. For clarity, it should refer to the Question stem or number. The value="1quot; tells the web browser what value to send for those items that are selected.

Radio Buttons

The Radio Buttons are similar to Checkboxes in that there is a single input tag for each response alternative. For example:

Please indicate which of the following sources is most successful for you in locating job applicants:
Newspaper
Recruiters
Web Resume Banks
Magazines

The HTML code used to generate this question looks like this:

<p>
<input type="radio" name="AppSource" value="1">Newspaper
<input type="radio" name="AppSource" value="2">Recruiters
<input type="radio" name="AppSource" value="3">Web Resume Banks
<input type="radio" name="AppSource" value="4">Magazines
</p>

The only difference between the code for the checkbox and the radio button is the input type. The Radio buttons only allow a respondent to select one alternative.

Select Lists

These are useful when you need to present respondents with a list of choices in a small amount of screen space. Common applications include lists of States and/or Countries. An example of a pulldown list is:


Select your state:
 
Your Department:
 
Years of Service
 
Age (optional)
 

The code for the above examples is:

<BR>
Select your state:
<select name="State">
<OPTION VALUE=>
<OPTION VALUE=AL>Alabama
<OPTION VALUE=AK>Alaska
<OPTION VALUE=AZ>Arizona
<OPTION VALUE=PA>Pennsylvania
<OPTION VALUE=MN>Minnesota
</select>
<BR> 
<BR>
Your Department:
<SELECT NAME="Department" ><OPTION>
<OPTION VALUE="1" >Accounting <OPTION VALUE="2" >Sales
<OPTION VALUE="3" >Marketing
<OPTION VALUE="4" >Administration
<OPTION VALUE="5" >Field Service
</SELECT>
<BR> 
<BR>
Years of Service
<SELECT NAME="Service" ><OPTION>
<OPTION VALUE="1" >0 - 5 years
<OPTION VALUE="2" >6 - 10 years
<OPTION VALUE="3" >11 - 15 years
<OPTION VALUE="4" >16 - 20 years
<OPTION VALUE="5" >21 - 25 years
<OPTION VALUE="6" >26 - 30 years
<OPTION VALUE="7" >31 plus years
</SELECT>
<BR> 
<BR>
Age (optional)
<SELECT NAME="MyAge" ><OPTION>
<OPTION VALUE="1" >Less than 20 yrs
<OPTION VALUE="2" >20 - 25 yrs
<OPTION VALUE="3" >26 - 30 yrs
<OPTION VALUE="4" >31 - 35 yrs
<OPTION VALUE="5" >36 - 40 yrs
<OPTION VALUE="6" >41 - 45 yrs
<OPTION VALUE="7" >46 - 50 yrs
<OPTION VALUE="8" >51 - 55 yrs
<OPTION VALUE="9" >56 - 60 yrs
<OPTION VALUE="10" >61 plus
</SELECT>

<BR> 

Buttons

Buttons may be inserted in HTML forms to enable the user to select from a variety of actions to take with the data.

The most common form is the submit button and appears in its most simplest form as:


        
 

Forms can be designed to include many different buttons such as:


        
 

The code for the examples above would look like:

<BR>

<input type=submit value="<< Previous">
<input type=submit value="Save">
<input type=submit value="Cancel">
<input type=submit value="Calculate">
<input type=submit value="Exit">
<input type=submit value="Reload">
<input type=submit value="Next >>">

<BR> 

Interactive Shading

Internet Explorer allows for interactive shading of form elements. Just move the mouse over the elements below for an example.

First Name Last Name
Music Sport Travel

Conditional Enabling of Items

Internet Explorer allows you to select certain items to be enabled or disabled. Just answer the items below for an example.