HTML Forms and CGI

Many CGI scripts are used to process information gathered by Web forms. This exercise shows the parts of a Web form that affect the CGI script. See the Forms section of Learning to Publish for more information about creating Web forms.

The HTML source template for the Web form used in the rest of the exercises is saved on UTS at ~www/learn/cgi/tutorialexample.html.

Parts of the <FORM> Tag

The <FORM> tag as it appears in the template:

<FORM METHOD="POST" ACTION="http://HOSTNAME/cgi-bin/cgiwrap/USERNAME/SCRIPTNAME">

The ACTION attribute tells the Web browser which URL to connect to when the submit button is clicked. You must change the ACTION attribute of the form tag on the example form so it shows the proper cgiwrap URL for the script you wish to have process the Web form. For now, use the HTML World script.

<FORM METHOD="POST" ACTION="http://uts.cc.utexas.edu/cgi-bin/cgiwrap/twmaint/htmlworld.cgi">

The METHOD attribute of the <FORM> tag tells the browser how it should send the information from the form to the Web browser. There are two possible choices, GET or POST.

METHOD="GET" tells the Web browser to append the information from the form to the end of the ACTION URL. There is a size limit to the amount of data that can be appended with the "GET" method that varies among different Web browsers. When you write a script to handle a form submitted with the GET method, the information from the form is saved to the environment variable QUERY_STRING.

METHOD="POST" tells the Web browser to send the information from the form, and then sends all of the information from the form as a second part of the request to the Web server. When you write a script to handle a form submitted with the POST method, the information from the form is treated like standard input. This is the method TeamWeb recommends using, and the method used in the rest of the examples in the tutorial.

Generally, GET is fine for short pieces of data that do not need to be secure. That data is merely attached to a URL while sent to a server and anybody can grab the data from a GET generated form as it passes over the Internet in a process called sniffing. POST is better for large amounts of data and/or data that needs to be encrypted (if security is an issue).

Other Form Tags

When a Web form is designed, each element of the form is assigned a name and some are assigned default values. Generally, when the form is submitted the browser passes each element name and the value, a name/value pair, to the Web URL specified in the action attribute of the <FORM> tag. Some form tags need special attention.

When a select menu, a checkbox, or an entire group of radio buttons is left blank, the browser does not send a name/value pair for the form element. This can cause problems when generating a tab-delimited text file. A common solution for blank select menus or radio buttons is to pre-select one of the options. To get around the problem with blank checkboxes, use a 2-item <SELECT> menu with one item pre-selected.

When a form contains a multiple select menu, the CGI script must be written to handle multiple values for a single form element.

When using an image as the "submit" button <INPUT TYPE="image" SRC="URL"> for a form, the browser sends two name/value pairs, one of these is the x-coordinate of where the user clicked, the other is the y-coordinate.