Basic of HTML form and DOM
In order to do interesting things on a server CGI program, we need some dynamic input from the user. The primary methods used on the world-wide web to collect user input are the form and what is now known as the document object model (DOM). Forms have been around since HTML 1.0 and are very well established while DOM functions are newer and not as refined (although much more powerful on the client side). The two concepts are related; a good understanding of HTML forms leads into a good understanding of the new object model. An HTML form contains elements which, depending on their type, can contain differing states.
Elements
An HTML <form> tag is the foundation of a user input section on a web page. The <form> tag may not be nested within other <form> tags. The tag generally looks like this:
<form method="get" action="/cgi-bin/myscript.pl">
Everything following that tag through the corresponding </form> tag can contain elements such as these:
A Text Input Box
<input type="text" name="foo">
A Radio Button
<input type="radio" name="color" value="blue>
A Check Box
<input type="checkbox" name="isMarried">
A Hidden Varible
<input type="hidden" name="StateVariable" value="1">
A Submit Button
<input type="submit" name="StateVariable">
Where each element has a name and an associated value. The value may be included with the tag itself (see the radio and hidden examples above), and/or it can be supplied by the user. A variable can return either a string or an array of strings. If you would like more information about the different tags that are available, or more in-depth coverage of forms in general, then you probably need to pick up a good book on HTML. I recommend "HTML: The Definitive Guide" by Chuck Musciano and Bill Kennedy.
Be sure to close your form with the </form> tag, when you are finished.
Variables
Names
Variable names can be any legal HTML identifier and are almost always supplied via the name property of an HTML tag. Here are some examples:
<input name="foo" ... >
<input name="bar" ... >
<input name="Desired Hair Color" ... >
<input name="Date" ... >
<input name="First Name" ... >
Once the form above is sent to the web server, the CGI program will be able to access these elements by those names:
my $foo = $cgi->param('foo');
my $bar = $cgi->param('bar');
my $hair_index = $cgi->param('Desired Hair Color');
my $date = new Date($cgi->param('Date'));
my $name = $cgi->param('First Name');
Values
A value can either be a string (as shown above), or it can be an array of items. Say that you have a series of checkboxes, or a list that accepts multiple selections. How do you access the variables in that case? With the CGI modules, it's easy:
my @values = $cgi->param('listOfStuff');
Internally, the CGI protocol will pass in a scalar that is delimited by the null character (known as \0 in a Perl string). The CGI module will take care of splitting it out for you and putting it neatly into an array. Then, every value that was selected in the list will appear in the resulting array.
Document Object Model
A relatively new development in the CGI and web world is the Document Object Model, or DOM:
http://www.w3.org/DOM
This technology takes the "form paradigm" to the next level by defining all the tags of an HTML document in terms of objects that can be accessed by client-side and server-side programs. In the DOM, a <form> is simply another object among many. A hyper link <a>, and most any other tag can have associated names and values. One can also programmatically change these values using scripting languages such as JavaScript, making web pages much more dynamic.
This tutorial will ignore DOM for the most part, but the reader should be aware of this powerful technology.