Working with CGI.pm In-Depth

Creating HTML Form Elements

Now that you've seen how to start and stop your forms with CGI.pm, let's take a closer look at actually creating form elements. There is a standard set of arguments that can be used with all of the form element functions. These are the name / value pairs that are passed in to the functions like so:

print $cgi->textfield( -id => 'first_name' );

In the above example, the name / value pair is -id (the name) and first_name (the value). Let's take a look at the standard arguments we can use with any of our form elements.

-name, -id: These fill in the fields name and id attribute. It's a good idea to keep these values the same since they have a similar function as far as the Document Object Model (DOM) is concerned. These are unique identifiers for your form field. Keep them as descriptive as possible, like you would do with variable names.

print $cgi->textfield( -name => 'first_name', -id => 'first_name' );

-value, -values: This fills in the form elements value attribute. Although -value and -values fill in the same field, one is for use in the scalar (string) context and the other is used to pass an array of values to some of the functions.

print $cgi->textfield( -name => 'first_name', -id => 'first_name', -value => 'Bob Smith' );
print $cgi->popup_menu( -name=>'several_names', -id => 'several_names', -values => ['Bob', 'John', 'Sam'] );

-tabindex: Tabindex is used in form elements to determine the order of fields when the user presses the tab key. This is an optional attribute, but can come in handy if your form is laid out in a peculiar fashion. For the most part, a form will naturally fall into the correct tab index.

print $cgi->textfield( -tabindex => 1 );

-override: When override is set to true, whatever value is contained in -value or -values will override any other value of the form field. Basically this means you can force a default value, even when a user entered value might take precedence.

print $cgi->textfield( -override => true );

-onChange, -onFocus, -onBlur, -onMouseOver, -onMouseOut, -onSelect: These are all used to add javascript actions to your form elements. They act like triggers and are called event handlers. You can find more information on event handlers on javascript.about.com