CS logo

Creating online forms
to collect information

Topics

I. Getting Started
II. Adding a text box
III. Adding radio buttons
IV. Adding check boxes
V. Adding a text block
VI. Adding a menu
VII. Adding control buttons
VIII. Adding subject and a from-email field
IX. Ending a form

Full Document

Web-based forms enable you to easily collect information from persons visiting your web site. Because they resemble traditional paper forms, web-based forms are intuitive and easy to use. To see a sample form, click here.

Web-based forms are comprised of two parts:

a user-interface where information is entered and collected, and

a program that processes the information.

The user-interface portion of the form is created using HTML. The program is written in a language, such as Perl, VBScript, or JavaScript. The program can either be run on a web server or can be run by the web browser. If the program is run on a Unix web server, it is often referred to as a CGI (Common Gateway Interface) script.

Fortunately, you only need to be concerned with creating the user interface portion of a form. You do not need to create the program because Temple has made a CGI script available to you. This particular script collects information submitted into a form and sends it to you as an e-mail message.

Note: The codes described on this web page are designed to be placed within the body of your HTML documents. They should be placed after the initial <HTML>, <HEAD>, <TITLE>, and <BODY> tags.

I. Getting Started

The first step in creating a form is to specify the name and location of the CGI script that will be used to process the form data. To do this, type the following code within your HTML file, and note that there are no spaces:

For example, if your e-mail address is jsmith@temple.edu, you would enter:

You are now ready to begin creating your form. Forms can include any of the following elements:

Text box
Password box
Radio button
Check box
Text block
Menu Buttons
Hidden fields

We'll now take a look at the HTML code for each of these elements, along with how it will appear on the screen. Note that you can place add space between elements by using the paragraph <P> or forced line break <BR> tags.

II. Adding a text box

Text boxes allow people to enter text into a form. Here is an example:

Last Name: <input TYPE="text" NAME="last name" SIZE="20">

The initial text, Last Name:, specifies the label that appears next to the text box. The phrase input TYPE="text" indicates that this is a text box. The next phrase NAME="last name" specifies the name of the element that will appear in the e-mail message after the user submits the form. Finally, the phrase SIZE="20" indicates that the text box is 20 characters wide.

III. Adding radio buttons

Radio buttons work similarly to the push buttons on a car radio, which enable you only to make one selection at a time. Here are two examples:

<input TYPE="radio" NAME="sex" VALUE="male">Male <input TYPE="radio" NAME="sex" VALUE="female">Female

In the first example, the phrase input TYPE="radio" indicates that this is a radio button. The next two phrases NAME="sex" and VALUE="male" specify what will appear in the e-mail message if a person clicks on this button. Finally, the text, Male, specifies the label that appears next to the radio button.

IV. Adding check boxes

Check boxes are similar to radio buttons except that you can make more than one selection at a time. Here are two examples:

<input TYPE="checkbox" NAME="veg1" VALUE="broccoli"> Broccoli

<input TYPE="checkbox" NAME="veg2" VALUE="cauliflower"> Cauliflower

checkboxes

In the first check box, the phrase input TYPE="checkbox" indicates that this is a check box. The next two phrases NAME="veg1" and VALUE="broccoli" specify what will appear in the e-mail message if a person clicks on this button. Finally, the text, Broccoli, specifies the label that appears next to the radio button.

V. Adding a text block

Text blocks enable you to leave room for a person to enter a block of information. Here is an example:

text block

The phrase textarea NAME="Other vegetables" specifies the name of the element that will appear in the e-mail message after the user submits the form. The number or ROWS and COLS determines the size of the text box.

VI. Adding a menu

Sometimes you may want people using your form to select from a menu of available of options rather then typing their own text. Here is an example of a menu for annual household income:

In the first example, the phrase select NAME="income" specifies the name of the element that will appear in the e-mail message. The next phrase, Size="3" indicates that three menu choices will appear automatically on the menu without the user having to use the scroll bars. The next phrase, VALUE="low-income" indicates what appears in the e-mail message if a person selects this entry. The text $15,000 to $25,000 specifies the text that appears in the menu. Finally, the phrase option SELECTED VALUE="lower-mid-income" indicates that this value will be highlighted automatically, by default.

VI. Adding control buttons

A form must include at least one control button for submitting the information once it is filled out. In addition, forms often include a button for resetting all the entries if a person wants to start over.

Here is an example of both a submit and reset button. Usually these buttons will be placed at the bottom of the form.

The phrase input TYPE="submit" indicates that this button will submit the information to the CGI script when it is selected. The next phrase, VALUE="Send Info" specifies what appears on the submit button. If this phrase was omitted, "Submit" would appear on the button. The next phrase input TYPE="reset" indicates that this button will reset the form. By default, "Reset" will appear on the button.

When a person presses the submit button, he or she will receive confirmation that the form results were sent to your e-mail address. You will then see an e-mail message in your Inbox with the subject FORM results. The message will list the name of each form element along with the value that it contains.

VII. Adding a subject and from-email field

You can also define other input fields such as subject, from-name and from-email. You can either allow the user to input the field or make the field hidden. When you make a hidden field it will allow you to define a set value. The following input names will allow you to customize the email that is sent back to you: "subject", "from-name", and "from-email". Here are some examples of both:

Email: <input TYPE="text" NAME="from-email " SIZE="20 ">

Subject: <input TYPE="text" NAME="subject " SIZE="20 ">

<input TYPE="hidden" NAME="subject" Value="Survey Results">

<input TYPE="hidden" NAME="from-name" Value="The Average Joe">

VIII. Ending a form

To properly end your form, you must place the following HTML tag at the bottom of the page directly after your last form element:

</FORM>

If this is the bottom of your page, make sure to include the following closing HTML tags:

</BODY>
</HTML>

Back to Creating a Web Page at Temple

Creating online forms to collect information

Creating online forms
to collect information