home / articles / cgi

Introduction to CGI Scripts

To get started with CGI, it's useful to have a few good examples that demonstrate the principles of accepting input from an HTML form, processing and then storing the data. This week's article and the ones that follow will do just that.

This is part of a series of articles discussing CGI processing. Part I introduces the basic HTML elements that are used to create a form. Part II discusses how those elements are transferred to the web server and processed by a CGI program. Part III discusses the difference between POST and GET. Finally, Part IV shows how data collected by a CGI program can be stored on the server.

HTML Form Elements

As you know, HTML files are made of tags, such as <TITLE>, <H1>, <BR>, etc. Likewise, there are specific tags that are used in forms. A form is started with the <FORM> tag, then come the form elements, and it ends with the </FORM> tag. One HTML file may have many separate forms, but, in practice it's usually best to have just one.

In an HTML file, start the form with the following tag:

<FORM METHOD="get" ACTION="/cgi-bin/script.pl">

The METHOD can be either get or post. The getmethod sends the form's data back in the URL and on the server, the environment variable QUERY_STRING will be set to the contents. The post method sends the data back separately, and the script reads it from standard input (STDIN). The ACTION specifies the URL of the CGI program that will process the data.

The Form Tags

Next, the elements of the form are specified. There are several possibilities:

---

<INPUT TYPE="text" NAME="box1" SIZE="10" MAXLENGTH="18" VALUE="hello">

This makes a single-line input box, where a user can type. NAME will be returned to the server. SIZE specifies the width of the box, in characters. MAXLENGTH sets the maximum number of characters that can be entered. VALUE sets the original text that will appear in the box. When submitted, the string "box1=hello" will be sent to the server, unless the user changes the text to something else.

---

<INPUT TYPE="password" NAME="secret" SIZE="8" MAXLENGTH="8" VALUE="hello">

This makes a password input box, where a user can type but the contents are hidden. NAME specifies the name of the field returned to the server. SIZE specifies the width of the box, in characters. MAXLENGTH sets the maximum number of characters that can be entered. VALUE sets the original text that will appear in the box.

---

<INPUT TYPE="checkbox" NAME="chk1" VALUE="hello">
<INPUT TYPE="checkbox" NAME="sample" VALUE="widget" CHECKED>

Above are two check boxes. They can be toggled on and off by clicking on them. If selected, then the NAME=VALUE will be returned to the server. NAME specifies the name of the field returned to the server. If CHECKED is specified, then the box will be selected initially.

---

<INPUT TYPE="radio" NAME="rad" VALUE="a1">
<INPUT TYPE="radio" NAME="rad" VALUE="a2" CHECKED>
<INPUT TYPE="radio" NAME="dar" VALUE="b1">
<INPUT TYPE="radio" NAME="dar" VALUE="b2" CHECKED>

These are similar to check boxes but behave differently. Radio buttons allow only one option to be selected among elements with the same name. They can be toggled on and off by clicking on them. If selected, then the NAME=VALUE will be returned to the server. NAME specifies the name of the field returned to the server. If CHECKED is specified, then the box will be selected initially.

---

<TEXTAREA NAME="area" ROWS="4" COLS="22" WRAP="virtual">Sample Text Area</TEXTAREA>

Sample Text Area

This makes an area where a user can type. Rows specifies the number of lines that will be displayed and columns sets the width of the box in characters. NAME specifies the name of the field returned to the server. Netscape added the WRAP tag. The value off is default and lines are sent exactly as typed. The value virtual wraps in the display but are sent exactly as typed. The value physical wraps in the display and sends new-lines at the wrap points as if new-lines had been entered.

---

<SELECT NAME="chooser" SIZE="3"> <OPTION VALUE="a">This is A <OPTION VALUE="b">Choice B <OPTION VALUE="c" SELECTED>C is it <OPTION VALUE="d">D is last </SELECT>

This is A Choice B C is it D is last

This gives a list of choices and the user can select one. SIZE is the number of rows that will be displayed. NAME specifies the name of the field returned to the server. For example, if Choice B is selected, then "chooser=b" will be returned. SELECTED determines which choice will be initially selected. The <SELECT> tag allows MULTIPLE to be used, like <SELECT MULTIPLE NAME="multichoice">, in which case multiple choices can be selected at one time.

---

<SELECT NAME="choices"> <OPTION VALUE="a">This is A <OPTION VALUE="b">Choice B <OPTION VALUE="c" SELECTED>C is it <OPTION VALUE="d">D is last </SELECT>

This is A Choice B C is it D is last

This gives a list of choices and the user can select one. Notice that by not specifying SIZE like in the previous example, the element looks quite different. NAME specifies the name of the field returned to the server. For example, if Choice B is selected, then "choices=b" will be returned. SELECTED determines which choice will be initially selected.

---

<INPUT TYPE="submit" NAME="in" VALUE="Send It">

This creates a button that submits the form. VALUE specifies the text that will appear on the button and the text that will be sent to the server in the form of NAME=VALUE. For example, in the example above, "in=Send+It" will be sent if you click on the button above.

---

<INPUT TYPE="reset" VALUE="Clear!">

This button resets all elements of a form to their original values; VALUE is the text on the button. If you click on this button, all the form elements will reset to their initial conditions.

---

</FORM>

This HTML tag ends the form.

---

Learning More about HTML

For more information on HTML tags, look at the following resources:

• HTML Reference at The Complete Webmaster
• HTML Elements is an excellent, if old, list of commonly used HTML elements.
• The World Wide Web Consortium sets the standards for HTML and also has detailed examples and reference material.

Learning more about CGI Forms

• Part I: Introduction - this document
• Part II: Sending Form Data
• Part III: Post vs Get
• Part IV: Back End Processing

Author: Doug Steinwand
Date: [01/27/98]

More articles about CGI
More articles by Doug Steinwand
Author Biography