Next / Previous / Contents / TCC Help System / NM Tech homepage

3. Linking to a CGI script

CGI scripting is most commonly used to process the data from a form after it is filled out by a user. However, you can also place a link on a Web page that invokes the CGI script directly, without requiring a form; for that technique, see Section 3.2, “Direct CGI links without use of a form.

3.1. Linking a form to a CGI script

Any web page may contain any number of “fill-out forms”, each represented by a form element in its HTML coding. For the complete details of form design, refer to the relevant section of Building web pages with XHTML 1.1.

The design of an HTML form must be closely coordinated with the design of the CGI script that processes that form's data.

  • Each form has a set of controls such as checkboxes, text entry fields, and buttons.

  • Each control must have an internal control name that is used by the CGI script to retrieve the value of that control.

  • The form must have a Submit button that causes the data on the form to be transmitted to the receiving CGI script.

  • When the Submit button is clicked, the CGI script will receive the information from the form as a set of ordered pairs (name, value). The name is the control name you assign to that control in the form's HTML code. The value is a string of characters that describes what the user entered in that control.

    Not all controls will transmit a name-value pair every time. For example, a checkbox control will transmit a name-value pair only when it is checked (turned on).

    Also, be aware that some controls can transmit more than one value. For example, if your form contains a pull-down menu or pick list made with select multiple='multiple', the user can select any or all of the items in the list.

  • The connection from a form to the CGI script that processes it is specified by the action attribute of the HTML form element.

    For the method attribute, we recommend method='get' in most situations. However, if your form includes a file control for uploading files, you must use method='post'.

Here is an example of a very simple web page that contains a form with only three elements: a text entry field labeled Favorite color, a checkbox labeled Color found in nature?, and a Submit button.

example-form.html
<html xmlns='http://www.w3.org/1999/xhtml'>
  <head>
    <title>Form example</title>
  </head>
  <body>
    <h1>Form example</h1>
    <form method='get'
      action='http://infohost5.nmt.edu/~tcc/demo/pycgi/anyform.cgi'>
      <div>
        <input type='text' name='fave' id='fave-field'/>
        <label for='fave-field'>Favorite color</label>
      </div>
      <div>
        <input type='checkbox' name='natural' id='nature-field'/>
        <label for='nature-field'>Color found in nature?</label>
      </div>
      <div>
        <input type='submit' value='send'/>
      </div>
    </form>
  </body>
</html>

Here is a screen shot of this page after a user has filled it out:

When the user clicks the send button, two name-value pairs will be transmitted to the handler script example.cgi:

  • ('fave', 'puce')

  • ('natural', 'on'): The default value for a checkbox is the string 'on'.

If you like, you can click here to try this form yourself.

To find out how to write a CGI script for this form, see Section 4, “Writing your CGI script”.

Keep in mind that some forms can transmit multiple values for one name. For example, if a form has an element select multiple='multiple' name='rainbow' containing the colors of the rainbow, the user might pick the top three, so name 'rainbow' is associated with the values 'red', 'orange', and 'yellow'. The associated CGI script must anticipate the possibility of multiple values for such control names.