9.2. HTML Forms
Before we examine the specifics of CGI, it is useful to review the most common method by which end users are presented with an interface to CGI programs: HTML forms. Forms are a part of the HTML markup language that enable fields of different types to be presented to the end user. Then data entered into the fields can be sent back to the web server. The fields can be lines or boxes of text or buttons which can be pushed or checked by the user. The following is an example of an HTML page that contains a form:
<HTML><HEAD><TITLE>My Forms Page</title></head> <BODY> <p>This is a page with a form. <p><FORM ACTION="mycgi.cgi" METHOD=POST> Enter your name: <INPUT NAME="firstname" SIZE=40><br> <INPUT TYPE=SUBMIT VALUE="Submit Form"> </form> </body></html>
This form creates a line 40 characters long into which the user can enter a first name. Underneath the input line is a button which, when clicked, will submit the form information to the server. The forms-related tags that are supported by HTML 3.2 -- currently the most widespread standard -- are listed below. Incidentally, names of tags and attributes are case-insensitive. We adhere to the convention of using uppercase for opening tags and lowercase for closing tags, but that's just one way of doing it.
- <FORM>
This tag indicates the beginning of a form. At the end of the form the closing </Form> is required. Within the <FORM> tag, three attributes are possible: ACTION gives the URL or relative path name of the CGI program to which the data will be sent; METHOD gives the HTTP method by which the form will be sent (this can be GET or POST, we will almost always use POST); ENCTYPE gives the method used to encode the data (this should only be used if you really know what you are doing).
- <INPUT>
This is the most flexible way to allow users to enter data. There are actually nine different styles of <INPUT> tag. The style is given by the TYPE attribute. In the example above, two <INPUT> tags are used, one with TYPE=SUBMIT and one with the default type of TEXT. The nine types are as follows:
- TEXT
A single line box in which the user may enter text.
- PASSWORD
The same as TEXT except that the entered text is not displayed on the screen.
- CHECKBOX
A checkbox which the user can check or uncheck.
- RADIO
A radio button which must be paired with at least one other radio button. The user can choose only one.
- SUBMIT
A button that submits the form to the web server when clicked.
- RESET
A button that resets the form to its default values when clicked.
- FILE
Like text, except that it expects the name of a file which it will upload to the server.
- HIDDEN
An invisible field in which you can store data.
- IMAGE
Like a submit button, except that you can specify an image to display on the button.
Besides TYPE, <INPUT> tags usually have a NAME attribute which associates the data entered in that field with a name; both the name and the data are passed to the server in key=value style. In the preceding example, the name of the text input field was firstname. A VALUE attribute can be used to give TEXT, PASSWORD, FILE and HIDDEN types a preset value. When used with SUBMIT or RESET it displays the text in the clickable box. RADIO and CHECKBOX types can be prechecked by using the CHECKEDThe SIZE attribute is used to provide a line length for TEXT, PASSWORD, and FILE types. Likewise, MAXLENGTH can be used to provide a limit for the amount of text entered. The SRC attribute gives the URL of the image to use for the IMAGE type. Finally, the ALIGN attribute tells where to align the image for the IMAGE type; it can be TOP, MIDDLE, BOTTOM (the default), LEFT, or RIGHT.
- <SELECT>
This tag provides a menu of choices from which the user can choose. The appearance can be either a drop-down menu from which the user can choose one item or a list from which the user can use one or more items. Each item appears in an <OPTION> tag. A closing </select> tag is required.
As with the <INPUT> tag, <SELECT> has a NAME attribute that gives a name to the entered data. A SIZE attribute is also available which determines how many options will be shown at once on the screen. If SIZE is missing, the list will be in a drop-down menu style. The MULTIPLE attribute, if present, indicates that more than one option can be chosen. The <OPTION> tag has two possible attributes. The VALUE attribute sets the value of the data to be returned. If no VALUE is present, the text after the <OPTION> tag to the end of the line will be used instead. If the SELECTED attribute is in an <OPTION> tag, that option will be preselected.
- <TEXTAREA>
This last form-related tag enables users to enter blocks of text that will be sent to the web server. A <TEXTAREA> tag presents the user with a blank box in which they can enter any number of lines of text to be sent back to the web server. A </Textarea> closing tag is required and any text between the <TEXTAREA> and </Textarea> will be used as the default text for the box -- similar to the VALUE attribute for the <INPUT> tag. The three attributes for <TEXTAREA> are all required. NAME gives a name to the data, just as with the other form-related tags. ROWS and COLS specify the number of rows and columns to make the text box on the screen, although the user will be able to enter data beyond those limits.
Example 9-1 showcases all of the different form elements.
Example 9-1. An HTML Form that Shows the Different Form Elements
<HTML><HEAD><TITLE>My Second Forms Page</title><BODY> <p>This is a survey. Please enter the following information about yourself: <!-- Now let's begin the form. We are using the 'POST' method and sending the information to a CGI program called 'survey.cgi' --> <FORM METHOD=POST ACTION="survey.cgi"> <p>Name: <INPUT SIZE=40 NAME='name'><br> <!-- This is an <INPUT> tag of the (default) 'TEXT' style. It is 40 characters long, and the data will have the name 'name' --> Social Security Number: <INPUT TYPE=PASSWORD NAME='ssn' SIZE=20><br> <!-- This is an <INPUT> tag of the 'PASSWORD' style, used here so that someone looking over the user's shoulder won't see the SSN of the user. The data is saved with the name 'ssn' and the field is 20 characters long on the screen. --> Are you or have you ever been associated with the Communist party? <INPUT TYPE=CHECKBOX NAME='commie' VALUE='yes'><br> <!-- This is an <INPUT> tag of the 'CHECKBOX' style, using the name 'commie' for the data. If the form is submitted with the box checked, the value 'yes' will be associated with the name 'commie' --> Sex: <INPUT TYPE=RADIO NAME='sex' VALUE='male'> Male <INPUT TYPE=RADIO NAME='sex' VALUE='female'> Female <INPUT TYPE=RADIO NAME='sex' VALUE='neither' CHECKED> Neither<br> <!-- These are three <INPUT> tags of the 'RADIO' style, using the name 'sex' for the data. Only one of the three can be chosen, and since one of them is prechecked, a value will be sent regardless of whether or not the user clicks on any of them. The value sent to the server is in the 'VALUE' attribute and need not have any relation to the text that comes after the tag. --> <INPUT TYPE=HIDDEN NAME="form_number" VALUE="33a"> <!-- This is a little extra information that we would like to send to the CGI, but which the user need not worry about, so we place it inside of an <INPUT> tag of the 'HIDDEN' type --> Please enter the path of your favorite game: <INPUT TYPE=FILE NAME='game' SIZE=40><br> <!-- If the user enters a valid path here, the file will be uploaded to the web server with the name 'game', when the user submits the form. Most web browsers will ask to confirm the transfer, however, so this example is not as insidious as it looks. --> What are your favorite color(s)?<br> <SELECT NAME="color" MULTIPLE SIZE=5> <OPTION>Red <OPTION>Green <OPTION>Yellow <OPTION>Orange <OPTION VALUE="Blue">A nice light sky azure </select><br> <!-- This is a <SELECT></select> pair with several <OPTION>s. The name given to the data is 'color', and multiple selections are allowed with all 5 being displayed on the screen at once. The last option uses a 'VALUE' attribute to provide a shortened form of the text. --> Describe the sociopolitical context of <I>War and Peace</I> in 50 words or less. Be thorough.<br> <TEXTAREA NAME='essay' COLS=70 ROWS=10></textarea><br> <!-- This is a <TEXTAREA></textarea> pair which provides a space for the entry of an essay. The data is given the name 'essay'. The text block is 70 characters wide and 10 rows deep. The space between the <TEXTAREA> and </textarea> tags could have been used to give an example essay. --> <INPUT TYPE=SUBMIT VALUE="Enter Info"> <INPUT TYPE=RESET> <!-- These are two <INPUT> tags of type 'SUBMIT' and 'RESET', respectively. The 'SUBMIT' button has the custom label 'Enter Info' while the 'RESET' button has the default value (determined by the browser). Clicking the 'SUBMIT' button will send the data to the web server. Clicking the 'RESET' button will restore the form to its original state, erasing any of the user's data. --> </form></body></html>
The only input type not used in this example was the IMAGE style of the <INPUT> tag. We could have used it on the page as an alternate way of submitting the form. However, the IMAGE style is rarely compatible with text-based and hearing-impaired accessible browsers so it may be wise to avoid it unless your site is unavoidably tied to a heavily graphical style.
Now that the basics of HTML forms have been covered, the next step is to enter the world of CGI itself.
 |  |  |
| 9. CGI Programming |  | 9.3. The CGI Specification |
Copyright © 2001 O'Reilly & Associates. All rights reserved.