Writing a CGI form
In this tutorial you will learn how to write a perl CGI form. If you have never done any perl CGI programming before, we suggest you first look at the CGI Tutorial.
Firstly you need to ensure that you have access to a web server (that has perl installed), that it has cgi enabled, and that you can put your perl script into the cgi directory.
Starting your script
Like a standard perl CGI script we use the CGI module to output the HTML:
Starting the form
To begin a form, you can use the start_form method:
Without any parameters, the HTML output is:
Using start_form, you can pass in parameters to define the form’s properties and behaviour:
The above code would produce the following HTML:
When you end the form, you can use the end_form method:
Form Fields
Form field methods are very similar to the standard html tag methods, but tend to require more parameters. The CGI module provides interfaces to more form fields than these, but these are the most common.
Text:
You can add other parameters that would normally appear in a text field definition (with a ‘-‘ in front), such as -onchange, or -class. The above code produces HTML as follows:
Textarea:
This produces the following HTML:
Hidden:
Hidden fields are very useful in web forms:
This produces the following HTML:
Select:
Select lists are a little more complicated.
To create a simple select list, where all the values are the same as the displayed text, you can do the following:
This produces the following HTML:
Or, if the select list is more complex, for example if the displayed text is to be different to the option values, or if you want to add attributes to the options:
The HTML this produces is:
Or if you want to do the same, but only have one data structure storing the data (instead of both the @values array and the %labels hash):
Checkbox:
The following code will create a single checkbox field:
This produces the following HTML:
The next code will create a group of checkboxes of the same name:
You can affect the layout of the checkboxes by modifying the values of -columns and -rows.
The above code results in the following HTML:
The table is the result of the -columns and -rows parameters.
Radio:
A radio button group is exactly the same as a checkbox group, except that there can only be one default value:
The results in:
Single radio buttons don’t make much sense in a web form, so they are not addressed by the CGI module.
Submit:
A submit button is used to submit your data to the URL provided in the ‘action’ property of the form. Often in cgi scripts you leave the ‘action’ property blank, so that the form is submitted back to the same program. This means that you only have one file to maintain for a form.
You can output a submit button like this:
Button:
A standard button is very similar:
Except that it will not submit the form (unless the javascript function does that).
Retrieving the Data
When the form is submitted, the web server will run the CGI program specified in the ACTION parameter (or the same program if none is specified). This time, however, the CGI object has the values for all the form fields (or parameters specified in the URL).
You can access these values with the param() method:
Most fields return scalar values (e.g. a text field returns a single string), but some (for example, checkbox groups) can return many values. You can access these in the same way:
Or you can get all the parameters in a hash by using the Vars method:
If you need all the parameter names, use the param method in array context:
Program structure
To help you design your programs into nice readable web forms, we suggest the following architecture (pseudo code):
Of course, you could make your program output many different forms and pages by adding more conditions:
A fully working example
The following is an example of a questionaire. The user fills in the form and submits it. The results are then displayed on the screen. Realistically, the results would probably be written to a database (using the DBI module, for example).