ch20.htm

prrl 5 programs codes in the book

user will be able to scroll to access text that is not visible.

<LI><B>TYPE</B>-Specifies the type of input field. The most important

field types are <TT>checkbox</TT>,

<TT>hidden</TT>, <TT>password</TT>,

<TT>radio</TT>, <TT>reset</TT>,

<TT>submit</TT>, and <TT>text</TT>.

<LI><B>SIZE</B>-Specifies the size of an input field.

<LI><B>VALUE</B>-Specifies the default value for a field. The

<TT>VALUE</TT> modifier is required

for radio buttons.

</UL>

<P>

Let's look at how to specify a plain text field:

<BLOCKQUOTE>

<PRE>

&lt;INPUT TYPE=text NAME=lastName VALUE=WasWaldo SIZE=25 MAXLENGTH=50&gt;

</PRE>

</BLOCKQUOTE>

<P>

This HTML line specifies an input field with a default value of

<TT>WasWaldo</TT>. The input box will

be 25 characters long although the user can enter up to 50 characters.

<P>

At times, you may want the user to be able to enter text without

that text being readable. For example, passwords need to be protected

so that people passing behind the user can't secretly steal them.

In order to create a protected field, use the <TT>password</TT>

type.

<BLOCKQUOTE>

<PRE>

&lt;INPUT TYPE=password NAME=password SIZE=10&gt;

<BR>



</PRE>

</BLOCKQUOTE>

<p>

<CENTER>

<TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>

<TR><TD><B>Caution</B></TD></TR>

<TR><TD>

<BLOCKQUOTE>

The <TT>password</TT> input option still sends the text through the Internet without any eNCryption. In other words, the data is still sent as clear text. The sole fuNCtion of the <TT>password</TT> input option is to ensure that the password is not 
visible on the screen at the time of entry.

</BLOCKQUOTE>



</TD></TR>

</TABLE>

</CENTER>

<P>

<P>

The <TT>&lt;INPUT&gt;</TT> tag is

also used to define two possible buttons-the submit and reset

buttons. The submit button sends the form data to a specified

URL-in other words to a CGI program. The reset button restores

the input fields on the forms to their default states. Any information

that the user had entered is lost. Frequently, the <TT>VALUE</TT>

modifier is used to change the text that appears on the buttons.

For example:

<BLOCKQUOTE>

<PRE>

&lt;INPUT TYPE=submit VALUE=&quot;Process Information&quot;&gt;

</PRE>

</BLOCKQUOTE>

<P>

Hidden fields are frequently used as sneaky ways to pass information

into a CGI program. Even though the fields are hidden, the field

name and value are still sent to the CGI program when the submit

button is clicked. For example, if your script generated an email

form, you might iNClude a list of email addresses that will be

carbon-copied when the message is sent. SiNCe the form user doesn't

need to see the list, the field can be hidden. When the submit

button is clicked, the hidden fields are still sent to the CGI

program along with the rest of the form information.

<P>

The last two input types are checkboxes and radio buttons. Checkboxes

let the user indicate either of two responses. Either the box

on the form is checked or it is not. The meaning behind the checkbox

depends entirely on the text that you place adjacent to it. Checkboxes

are used when users can check off as many items as they'd like.

For example:

<BLOCKQUOTE>

<PRE>

&lt;INPUT TYPE=checkbox NAME=orange CHECKED&gt;Do you like the color Orange?

&lt;INPUT TYPE=checkbox NAME=blue   CHECKED&gt;Do you like the color Blue?

</PRE>

</BLOCKQUOTE>

<P>

Radio buttons force the user to select only one of a list of options.

Using radio buttons for a large number of items (say, over five)

is not recommended because they take up too much room on a web

page. The <TT>&lt;SELECT&gt;</TT>

tag should be used instead. Each grouping of radio buttons must

have the same name but different values. For example,

<BLOCKQUOTE>

<PRE>

Operating System:&lt;BR&gt;

&lt;INPUT TYPE=radio NAME=os VALUE=Win95&gt;Windows 95

&lt;INPUT TYPE=radio NAME=os VALUE=WinNT&gt;Windows NT

&lt;INPUT TYPE=radio NAME=os VALUE=UNIX CHECKED&gt;UNIX

&lt;INPUT TYPE=radio NAME=os VALUE=OS2&gt;OS/2

CPU Type:&lt;BR&gt;

&lt;INPUT TYPE=radio NAME=cpu VALUE=Pentium&gt;Intel Pentium

&lt;INPUT TYPE=radio NAME=cpu VALUE=Alpha CHECKED&gt;DEC Alpha

&lt;INPUT TYPE=radio NAME=cpu VALUE=Unknown&gt;Unknown

</PRE>

</BLOCKQUOTE>

<P>

You should always provide a default value for radio buttons because

it is assumed that one of them must be selected. Quite ofen, it

is appropriate to provide a &quot;none&quot; or &quot;unknown&quot;

radio button (like the &quot;CPU Type&quot; in the above example)

so that the user won't be forced to pick an item at random.

<P>

Another useful form element is the drop-down list input field

specified by the <TT>&lt;SELECT&gt;..&lt;/SELECT&gt;</TT>

set of tags. This form element provides a compact way to let the

user choose one item from a list. The options are placed inside

the <TT>&lt;SELECT&gt;..&lt;/SELECT&gt;</TT>

tags. For example,

<BLOCKQUOTE>

<PRE>

&lt;SELECT NAME=weekday&gt;

&lt;OPTION SELECTED&gt;Monday

&lt;OPTION&gt;Tuesday

&lt;OPTION&gt;Wednesday

&lt;OPTION&gt;Thursday

&lt;OPTION&gt;Friday

&lt;/SELECT&gt;

</PRE>

</BLOCKQUOTE>

<P>

You can use the <TT>SELECTED</TT>

modifier to make one of the options the default. Drop-down lists

are very useful when you have three or more options to choose

from. If you have less, consider using radio buttons. The <TT>&lt;SELECT&gt;</TT>

tag has additional options that provide you with much flexibility.

You can read about these advaNCed options at:

<BLOCKQUOTE>

<PRE>

http://robot0.ge.uiuc.edu/~carlosp/cs317/ft.4-5f.html

</PRE>

</BLOCKQUOTE>

<P>

The last form element that I should mention is the text box. You

can create a multi-line input field or text box using the <TT>&lt;TEXTAREA&gt;..&lt;/TEXTAREA&gt;</TT>

set of tags. The <TT>&lt;TEXTAREA&gt;</TT>

tag requires both a <TT>ROWS</TT>

and a <TT>COLS</TT> modifer. You can

place any default text for the text box inside the <TT>&lt;TEXTAREA&gt;..&lt;/TEXTAREA&gt;</TT>

tags.

<BLOCKQUOTE>

<PRE>

&lt;TEXTAREA NAME=comments ROWS=3 COLS=60&gt;&lt;/TEXTAREA&gt;

</PRE>

</BLOCKQUOTE>

<P>

The user's Web browser will automatically provide scroll bars

as needed. However, the text box will probably not word-wrap.

In order to move to the next line, the user must press the enter

key.<BR>

<p>

<CENTER>

<TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>

<TR><TD><B>Note</B></TD></TR>

<TR><TD>

<BLOCKQUOTE>

If you'd like a more advaNCed introduction to HTML forms, try this web site:</BLOCKQUOTE>

<BLOCKQUOTE>

<TT>http://robot0.ge.uiuc.edu/~carlosp/cs317/ft.1.html</TT>

</BLOCKQUOTE>



</TD></TR>

</TABLE>

</CENTER>

<P>

<H2><A NAME="HandlingFormInformation"><FONT SIZE=5 COLOR=#FF0000>

Handling Form Information</FONT></A></H2>

<P>

There are two ways for your form to receive form information-the

<TT>GET</TT> method and the <TT>POST</TT>

method. The transfer mechanism is specified in the <TT>&lt;FORM&gt;</TT>

tag using the <TT>METHOD</TT> modifier.

For example, the following HTML line tells the client web browser

to send the form information back to the server using the <TT>GET</TT>

method.

<BLOCKQUOTE>

<PRE>

&lt;FORM METHOD=get ACTION=/cgi-bin/gestbook.pl&gt;

</PRE>

</BLOCKQUOTE>

<P>

The <TT>GET</TT> method appends all

of the form data to the end of the URL used to invoke the CGI

script. A question mark is used to separate the original URL (specified

by the <TT>ACTION</TT> modifier in

the <TT>&lt;FORM&gt;</TT> tag) and

the form information. The server software then puts this information

into the <TT>QUERY_STRING</TT> environment

variable for use in the CGI script that will process the form.

<P>

The <TT>GET</TT> method can't be used

for larger forms because some web servers limit the length of

the URL portion of a request. (Check the documentation on your

particular server.) This means that larger forms might blow up

if submitted using the <TT>GET</TT>

method. For larger forms, the <TT>POST</TT>

method is the answer.

<P>

The <TT>POST</TT> method sends all

of the form information to the CGI program using the <TT>STDIN</TT>

filehandle. The web server will set the <TT>CONTENT_LENGTH</TT>

environment variable to indicate how much data the CGI program

needs to read.

<P>

The rest of this section develops a fuNCtion capable of reading

both types of form information. The goal of the fuNCtion is to

create a hash that has one entry for each input field on the form.

<P>

The first step is simply to read the form information. The method

used to send the information is stored in the <TT>REQUEST_METHOD</TT>

environment variable. Therefore, we can examine it to tell if

the fuNCtion needs to look at the <TT>QUERY_STRING</TT>

environment variable or the <TT>STDIN</TT>

filehandle. Listing 20.1 contains a fuNCtion called <TT>getFormData()</TT>

that places the form information in a variable called <TT>$buffer</TT>

regardless of the method used to transmit the information.

<P>

<IMG SRC="pseudo.gif" tppabs="http://cheminf.nankai.edu.cn/~eb~/Perl%205%20By%20Example/pseudo.gif" BORDER=1 ALIGN=RIGHT><p>

<BLOCKQUOTE>

<I>Define the </I><TT><I>getFormData()</I></TT><I>

fuNCtion.<BR>

Initialize a buffer.<BR>

If the </I><TT><I>GET</I></TT><I>

method is used, copy the form information into the buffer.<BR>

If the </I><TT><I>POST</I></TT><I>

method is used, read the form information into the buffer.</I>

</BLOCKQUOTE>

<HR>

<BLOCKQUOTE>

<B>Listing 20.1&nbsp;&nbsp;20LST01.PL-The First Step Is to Get

the Form Information<BR>

</B>

</BLOCKQUOTE>

<BLOCKQUOTE>

<PRE>

sub getFormData {

    my($buffer) = &quot;&quot;;



    if ($ENV{'REQUEST_METHOD'} eq 'GET') {

        $buffer = $ENV{'QUERY_STRING'};

    }

    else {

        read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});

    }

}

</PRE>

</BLOCKQUOTE>

<HR>

<p>

<CENTER>

<TABLE BORDERCOLOR=#000000 BORDER=1 WIDTH=80%>

<TR><TD><B>Tip</B></TD></TR>

<TR><TD>

<BLOCKQUOTE>

SiNCe a single fuNCtion can handle both the <TT>GET</TT> and <TT>POST</TT> methods, you really don't have to worry about which one to use. However, because of the limitation regarding URL length, I suggest that you stick with the <TT>POST</TT> method.

</BLOCKQUOTE>



</TD></TR>

</TABLE>

</CENTER>

<P>

<P>

I'm sure that you find this fuNCtion pretty simple. But you might

be wondering what information is contained in the <TT>$buffer</TT>

variable.

<P>

Form information is passed to a CGI program in <TT>name=value</TT>

format and each input field is delimited by an ampersand (<TT>&amp;</TT>).

For example, if you have a form with two fields-one called <TT>name</TT>

and one called <TT>age</TT>-the form

information would look like this:

<BLOCKQUOTE>

<PRE>

name=Rolf+D%27Barno&amp;age=34

</PRE>

</BLOCKQUOTE>

<P>

Can you see the two input fields? First, split up the information

using the <TT>&amp;</TT> as the delimiter:

<BLOCKQUOTE>

<PRE>

name=Rolf+D%27Barno

age=34

</PRE>

</BLOCKQUOTE>

<P>

Next, split up the two input fields based on the <TT>=</TT>

character:

<BLOCKQUOTE>

<PRE>

Field Name: name    Field Value: Rolf+D%27Barno

Field Name: age     Field Value: 34

</PRE>

</BLOCKQUOTE>

<P>

Remember the section on URL eNCoding from <A HREF="ch19.htm" tppabs="http://cheminf.nankai.edu.cn/~eb~/Perl%205%20By%20Example/ch19.htm" >Chapter 19</A>? You see

it in action in the name field. The name is really <TT>Rolf

D'Barno</TT>. However, with URL eNCoding spaces are converted

to plus signs and some characters are converted to their hexadecimal

ASCII equivalents. If you think about how a single quote might

be mistaken for the beginning of an HTML value, you can understand

why the ASCII equivalent is used.

<P>

Let's add some features to the <TT>getFormData()</TT>

fuNCtion to split up the input fields and store them in a hash

variable. Listing 20.2 shows the new version of the <TT>getFormData()</TT>

fuNCtion.

<P>

<IMG SRC="pseudo.gif" tppabs="http://cheminf.nankai.edu.cn/~eb~/Perl%205%20By%20Example/pseudo.gif" BORDER=1 ALIGN=RIGHT><p>

<BLOCKQUOTE>