Collecting Information with Forms

Learning Objectives

• Become familiar with the HTML tags used when writing a form
• Understand what files are required to build a form
• Understand what happens to information collected with a form

Key Concepts

• A CGI script or program performs a task when requested to do so from an HTML file
• Forms use CGI scripts or programs to do their work
• Forms require two separate files, an HTML file and a TXT file
• Forms tags must be contained within the <FORM></FORM> tags
• Some text browsers, lynx for example, can use forms

Lesson Plan

• Creating a form to gather information
• Download sample files and get more information

Gathering information with a form

Information filled in on-screen

• Requires CGI programs
• Works with lynx or Netscape
• Mails information you collect to a specified e-mail address

Each form consists of a pair of files:

• The .html file contains the commands to display the form and collect information
• The .txt file contains the information about where to mail the results and how they should be formatted
• Create both files with your text editor
• Click here to see a sample form file. Select View, Source from the Netscape menus to see what the html codes look like in this document.
• Click here to see what the sample text file that formats the mail message looks like. This is very similar to creating a Mail Merge document in a word processor.

Special forms tags

• Forms can collect information in different ways
• Each way of collecting information has a tag to describe it
  • <INPUT></INPUT> accepts input from the user
  • <SELECT></SELECT> provides a list of items for user to select from
  • <TEXTAREA></TEXTAREA> lets the user enter several lines of text
• Form tags must be contained within the <FORM></FORM> tag
• Other kinds of tags, heading tags for example, can also be contained within the <FORM></FORM> tags

The syntax for the <FORM></FORM> tag is:

<FORM METHOD="POST" ACTION=
"http://www.du.edu/cgi-bin/cgiemail/myunitsite/mytextfile.txt">
	
	Your form (and other kinds of) tags go here
</FORM>

Click here to look at the sample form file.

• The METHOD will always be POST for our e-mail forms.
• The ACTION statement contains two parts
  • Location of the program that will process the form (http://www.du.edu/cgi-bin/cgiecho)
  • Location of your file that contains the formatting information for the e-mail message (/myunitsite)

1. Log on to your account on Agora.
2. Enter the command cd public_html to change to your public_html subdirectory
3. Enter the command lynx http://www.du.edu/classes/forms
4. Use the spacebar and/or down arrow key to locate and view the sample form
5. Press \ to view the sample form as HTML
6. Press p to "print" the sample form
7. Select Save to a local file by pressing Enter
8. Accept the default file name by pressing Enter
9. Use the spacebar and/or down arrow key to locate and view the sample text file
10. Press p to "print" the sample text
11. Select Save to a local file by pressing Enter
12. Accept the default file name by pressing Enter
13. Press q to quit lynx
14. Set the permissions on the saved files by entering the command chmod 644 smplform.*
15. Edit the sample form by entering the command pico smplform.html
16. Replace **** with your login in the FORM tag
17. Replace #### with smplform in the FORM tag
18. Test and edit again as needed
19. Try adding new form tags

INPUT, SELECT and TEXTAREA tags are used inside <FORM…></FORM> tags

Here is a sample of an INPUT tag:

<INPUT TYPE="radio" NAME="dutype" VALUE="Faculty"> Faculty
<INPUT TYPE="radio" NAME="dutype" VALUE="Non-Exempt"> Non-Exempt
<INPUT TYPE="radio" NAME="dutype" VALUE="Exempt"> Exempt

• INPUT is the tag "name"
• TYPE indicates how the user will input information
  • CHECKBOX offers several choices and allows for more than one to be selected
  • RADIO offers several choices but allows only one to be selected
  • TEXT allows one line of text to be input
  • RESET clears all the values in the form
  • SUBMIT sends the information collected on the form for processing
• NAME is the name of the variable that will contain the information you collect. You will use this name later when you are deciding where to place information in the mail message.
• VALUE is the information that NAME (dutype) will contain if the radio button is selected.
• The tag is repeated for each option you want to offer the user. Only the VALUE= part of the statement is different.
• The text that follows the tag can differ from the text in the VALUE= attribute.

EXERCISE: Look at the sample form file. Choose one of the other INPUT tag types and add it to your form.

The RESET and SUBMIT buttons

• Used to clear the form (RESET) or to send (SUBMIT) the information on for e-mailing.
• Both show up as buttons on a graphical browers.
• The text in the VALUE= attribute is displayed on the button.

  <INPUT TYPE="submit" VALUE="Send">
  

The second file in the pair of form files formats the mail message (.txt file)

• For convenience, give this file the same name as the .html file, but end with .txt
• The first three lines of the file must be

	To:
	From:
	Subject:

• Use the variable name specified in the form (.html) file to put the information you collect into the mail message. Enclose the variable name in [square brackets]. For example

	To: [email_address]

Look at a sample text file.

smplform.html (Sample HTML form file)

smplform.txt (Sample .txt for use with form)

We obtained our forms processing program (cgiemail) from MIT. Visit their cgiemail page for additional information. You DO NOT need to download the software, it is already installed on our server.