Loading....
Coupon Accepted Successfully!

 

Forms

Usually the information supplied by the QUERY_STRING variable should come from the user pressing buttons and entering text in the HTML document. It is this information we would like to package up and send to the CGI script. Each group of buttons and text boxes is called a form, and forms are enclosed between the HTML tags <form> ...
 

</form>. You also have to tell it the URL to send the information to, and how the information is sent. The result is something like this:

<form action="http://www.comp.leeds.ac.uk/sam-cgi/answerme"
 

method="GET">

Some text in here.

It can anything except another form.

</form>

The action tag is the URL of the CGI script. The method GET tells it to use the QUERY_STRING method of sending information. As indicated, almost anything can go between the form tags, including text and various types of input devices. In particular we can have...

Submit buttons

 A submit button is the input device that actually calls the URL. It has a value which is the message that appears on the button. Here is the code for a form with just a submit button in it. When you click on the submit button the URL specified in the form's action is called.

 

<form action="http://www.comp.leeds.ac.uk/cgi-bin/Perl/environment-example"

method="GET">

<input type="submit" value="Click me">

</form>

The result is a form which looks like this.

Click me

If you click the submit button then the URL will be called. However the QUERY_STRING variable will be null because no information was specified. The answer is to use...

Checkboxes

A checkbox is a simple on/off button. A checkbox has a name (its key) and a value that this key has when the box is checked. As an example, here is the HTML code for a form with a checkbox and a submit button in it.

<form action="http://www.comp.leeds.ac.uk/cgi-bin/Perl/environment-example"
method="GET">
<input type="checkbox" name="lights" value="on">
<input type="submit" value="Do it">
</form>

 

The result of this code is the following form

Do it

Now if the submit button is clicked when the box is checked then the information lights=on is packaged into QUERY_STRING. However if the box is not checked then no information is packaged into QUERY_STRING and it remains empty. Notice also that the checkbox does not appear with a message. This is something you have to add yourself as ordinary HTML text.
 

Here is example HTML code for a form with two checkboxes and a message for each.
 

<form action="http://www.comp.leeds.ac.uk/cgi-bin/Perl/environment-example"
method="GET">
<input type="checkbox" name="lights" value="on"> Lights
<input type="checkbox" name="camera" value="on"> Camera
<input type="submit" value="Do it">
</form>

The result of this code is the following form

Lights Camera

Do it

Click the submit button with various combinations of checked boxes and watch how the QUERY_STRING environment variable changes. If both boxes are checked then the names are separated by an & sign, as we saw earlier.

Radio buttons

Radio buttons are just like checkboxes except they are grouped together and only one button in the group may be selected at a time. All the buttons in a group must have the same name and each one should have a different value. You can also specify which buttons (if any) are checked initially. When the submit button is clicked the name and the value of the selected button are packaged up for QUERY_STRING.

Here is some example code for five such buttons. They are all of type radio, and are in the group named cert. The 15 button is checked initially.

<form action="http://www.comp.leeds.ac.uk/cgi-bin/Perl/environment-example"
method="GET">
<input type="radio" name="cert" value="u"> U
<input type="radio" name="cert" value="pg"> PG
<input type="radio" name="cert" value="12"> 12
<input type="radio" name="cert" value="15" checked> 15
<input type="radio" name="cert" value="18"> 18
<input type="submit" value="Certify">
</form>                  

The result of this HTML code is the following form.

U PG 12 15 18

Certify

Again, try this out for yourself and watch QUERY_STRING change. Notice that the value of cert for the U and PG buttons are in lowercase because this is what we specified with the value tag.

Text boxes

Finally we deal with text input devices. These are simply boxes into which the user can enter some text which is then packaged up under a particular name. Here is some example code for two text boxes and a submit button. The <br> tag causes a line break.

<form action="http://www.comp.leeds.ac.uk/cgi-bin/Perl/environment-example"
method="GET">
Director: <input type="text" name="dir"> <br>
Producer: <input type="text" name="prod">
<input type="submit" value="Fire">
</form>

The result is the following form

Director:

Producer:

Fire

Recall that spaces are encoded as + signs and some other characters are encoded in their hexadecimal form. Try entering signs like &, + and % in particular.

Text areas and the POST method

As well as allowing single-line text boxes, forms also allow multiline text areas. A text area does not use the input tag; it is a pair <textarea> ... </textarea> in its own right, with the default contents going between the two tags. A text area must still have a name, but we can also specify how many rows and columns it has.
 

Here is the HTML code for a 40 by 4 text box with some initial default text.

<form action="http://www.comp.leeds.ac.uk/cgi-bin/Perl/environment-example"
method="GET">
<textarea name="review" cols=40 rows=4>I urge you to see it.
</textarea>
<input type="submit" value="Publish">
</form>

 

This looks like

I urge you to see it.

Publish

When the submit button is clicked the contents of the entire text box is packaged up and sent as the query string. It is at this point that things can start to go wrong. The information to the query string is sent as part of the URL, but the URL can often only be so many characters long (about two hundred) before the HTTP server chokes on information overload. This isn't very likely with the examples we've seen before now, but text areas can contain potentially unlimited amounts of text and so it starts to be a danger.

The solution is to use another method to send the data.

The POST method

Until now we've been using the GET method to send information to the HTTP server. The GET method is the method of packaging the information into the URL and then passing it to the CGI script as the QUERY_STRING environment variable. A generally more reliable method is the POST method. This packages the information in exactly the same way, but instead of sending it as a text string after a ? in the URL it sends it as a separate message. This message comes into the CGI script in the form of the standard input.
 

Once again these details needn't bother us, though, because the & read input subroutine is designed to cope with this. All we need to worry about is setting the form's method to POST, and then everything else stays the same. The resultant HTML code should look like this:
 

<form action="http://www.comp.leeds.ac.uk/cgi-bin/Perl/environment-example"
method="POST">
<textarea name="review" cols=40 rows=4>I urge you to see it.
</textarea>
<input type="submit" value="Publish">
</form>

Notice that only the method has changed from GET to POST. Everything else remains the same. Now when the URL is accessed the query string should be empty because the information is no longer sent that way. Try it:
 

I urge you to see it.

Publish

The way to access the information is to write a CGI script which uses the &read_input

subroutine. The script in webm/WWW/Perl/Source/ta-example is one such. Here is the

HTML code for the form which accesses it, followed by the form itself.

<form action="http://www.comp.leeds.ac.uk/cgi-bin/Perl/ta-example"
method="POST">
<textarea name="review" cols=40 rows=4>I urge you to see it.
</textarea>
<input type="submit" value="Publish">
</form>

 

I urge you to see it.

Publish

It's interesting to note that since this text is fed straight into the HTML document being generated it's actually interpreted as HTML. For a graphic illustration of this try pasting the above HTML code into the text area and submitting that.

 





Test Your Skills Now!
Take a Quiz now
Reviewer Name