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.
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.
Copyright © 2001 O'Reilly & Associates. All rights reserved.