Contents

 [*] Form filling
 [*] Simple forms
 [*] Multiple elements
 [*] Multiple lines of input
 [*] Check boxes
 [*] Radio button
 [*] Pop up list
 [*] Reset values
 [*] Image maps
 [*] Hidden form element

        ------------------------------------------------------------
        Warning if you are not using a browser that supports tables
                such as Netscape 1.1 or later then this page
                 will probably be very difficult to read.
        ------------------------------------------------------------

[Index]  Form filling

A web page can request input from the user who is browsing the page. After
the user has finishing filling in the form, the entered data is sent to a
CGI (Common Gateway Interface) script for processing. The CGI script
returns as its result a text stream representing a web page. This web page
contains all the normal text plus markup tags of a conventual web page. The
only difference is that it is prefixed with the text:

 Content-type: text/html

A form is introduced by the tag <FORM> and terminated by the inverse tag
</FORM>. The attributes of the <FORM> tag include:

ACTION="http://host/cgi-bin/script_name"
     After the form has been filled in, the entered data is sent to the
     named CGI script for processing.

     The script is confined to being in the cgi-bin directory or nominee.
     The location of the cgi-bin directory is defined by the web
     administrator.

[Index]  Simple forms

A form to request the user to enter text which is to be sent to the CGI
script mas_form is shown below. This is introduced by the <INPUT> tag.

 Generated form HTML markup required

                 <FORM ACTION="URL"
                 <INPUT TYPE="text" NAME="name"
                        SIZE=20 VALUE="Your name">
                 </FORM>


To activate the CGI program enter textual information into the text box and
then press "Enter" on the keyboard. The input data is sent to the CGI
script in the form:

 name=Your+name

The attributes of the <INPUT> tag include:

NAME="name"
     Names the argument which is sent to the CGI script
VALUE="Your name"
     The value of the argument.
SIZE=20
     The width of the input area.

[Try it]

In sending the data to the CGI script there are various character mappings
of the input data to ease later processing. For example:

 Input character Sent to CGI script  Input character Sent to CGI script
 space           +                   %               %25
 =               %3D                 &               %38
 Line Feed       %0A                 Carriage Return %0D

Note:
     How some input characters are represented by their hexadecimal
     representation. Which is indicated by the sequence %HH, where H is a
     hexadecimal digit.

A form to request a password or any secret text to be entered is:

 Generated form   HTML markup required

                   <FORM ACTION="URL"
 Enter PIN Number  Enter PIN Number<BR>
                   <INPUT TYPE="password" NAME="Password"
                          SIZE=20 VALUE="">
                   </FORM>


Warning: This is not secure, unless the data is encrypted before being sent
over the internet. Even if it is encrypted, the encryption may still be
broken.

[Try it]

                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Multiple elements

More specialized forms can be designed, which contain multiple elements. In
these forms an additional tag <INPUT TYPE="submit"> is used to cause the
submission of the input data to the CGI script. The attribute TYPE="submit"
identifies the type of input action. For example, the <FORM> tag encloses
an <INPUT> tag of the form:

 <INPUT TYPE="submit" NAME="button" VALUE="Send">

Which when pressed will send in addition to any information entered in the
form the additional message button=Send. There may be several of these
input tags with in a form. The VALUE attribute identifies which <INPUT> tag
has been selected.

For example, the form below is composed of several buttons.

 Generated form HTML markup required

                 <FORM ACTION="URL"
                 <INPUT TYPE="submit" NAME="button" VALUE=" A ">
                 <INPUT TYPE="submit" NAME="button" VALUE=" B ">
                 </FORM>


Which when a button is pressed will send a message of the form:

 button=+A+

to the CGI script if button "A" is pressed.

[Try it]

                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Multiple lines of input text

A form to request the user to input multiple lines of input uses the
<TEXTAREA> tag. So that the user can enter multiple lines the <INPUT
TYPE="submit"> tag is used to signal when the form has been completed. For
example:

 Generated form HTML markup required

                 <FORM ACTION="URL"
                 <TEXTAREA NAME="feedback" ROWS=5 COLS=20>
                 My thoughts so far are:
                 </TEXTAREA>
                 <BR>
                 <INPUT TYPE="submit" NAME="button"
                        VALUE="Send">
                 </FORM>


Note:
     As there may be many input lines there is an inverse </TEXTAREA> tag
     to signify the end of the initial value.

The attributes of the <TEXTAREA> tag include:

ROWS=n
     Defines the number of rows of the input area.
COLS=n
     Defines the number of columns of the input area.

When there are several elements in a form the data sent to the CGI script
is composed of the individual elements concatenated together with an &. For
example, when the Send button is pressed and no changes have been made to
the form data then the following information will be sent to the CGI
script:

 feedback=My+thoughts+so+far&button=Send

[Try it]

                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Radio button

A form to request the user to select from one of a series of radio buttons
uses the <INPUT> tag with an attribute of TYPE="radio". An example of a
radio button input form to select the sex of a person is shown below:

 Generated form HTML markup required

                 <FORM ACTION="URL"
 Male            <INPUT TYPE="radio" NAME="sex" VALUE="M">Male<BR>
 Female          <INPUT TYPE="radio" NAME="sex" VALUE="W">Female<BR>
                 <INPUT TYPE="submit" NAME="button" VALUE="Send">
                 </FORM>


The optional attribute CHECKED can be added to one of the <INPUT> radio
tags to set a default selection. For example:

 Generated form HTML markup required

                 <FORM ACTION="URL"
 Age             Age<BR>
 <18             <INPUT TYPE="radio" NAME="age" VALUE="a">&lt;18<BR>
 18-65           <INPUT TYPE="radio" NAME="age" VALUE="b"
 65+                    CHECKED>18-65<BR>
                 <INPUT TYPE="radio" NAME="age" VALUE="c">65+<BR>
                 <INPUT TYPE="submit" NAME="button" VALUE="Send">
                 </FORM>


[Try it]

                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Check boxes

A form to allow the user to select one or more check boxes uses the <INPUT>
tag with an attribute of TYPE="checkbox". An example of a checkbox form is
shown below:

 Generated form HTML markup required

                 <FORM ACTION="URL"
                 Use<BR>
                 <INPUT TYPE="checkbox" NAME="use"
 Use                    VALUE="Ada 95" CHECKED>Ada 95<BR>
 Ada 95          <INPUT TYPE="checkbox" NAME="use"
 C++                    VALUE="C++" CHECKED>C++<BR>
 COBOL           <INPUT TYPE="checkbox" NAME="use"
                        VALUE="COBOL">COBOL<BR>
                 <INPUT TYPE="submit" NAME="button"
                        VALUE="Send">
                 </FORM>


The following extra attributes can be added to the input tag for a check
box.

CHECKED
     The initial state for this check box is that the box is checked.

[Try it]

                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Pop up list

A form to allow the user to select an item from a pop-up list uses the
<SELECT> tag. An example of a pop-up list is shown below:

 Generated form HTML markup required

                 <FORM ACTION="URL"
                 Media used is<BR>
                 <SELECT NAME="Media">
                         <OPTION SELECTED> Disk
 Media used is           <OPTION> Floppy disk
                         <OPTION> DAT tape
                 </SELECT>
                 <BR>
                 <INPUT TYPE="submit" NAME="button"
                        VALUE="Send">
                 </FORM>


The <SELECT> tag encloses the tag:

<OPTION>
     Which names a value in the pop-up list.

     The OPTION tag may have an attribute of SELECTED to define the initial
     value of the pop-up list.

[Try it]

                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Reset values

The <INPUT> tag with an attribute of TYPE="reset" is used to reset the
values in a form back to their default value. For example, the following
form may be reset to its initial values by pressing the "reset" button.

 Generated form   HTML markup required

                   <FORM ACTION="URL"
                   I like to drink:<BR>
 I like to drink:  <INPUT TYPE="checkbox" NAME="Like"
 Coffee                   VALUE="Coffee" >Coffee<BR>
 Tea               <INPUT TYPE="checkbox" NAME="Like"
                          VALUE="Tea">Tea<BR>
                   <INPUT TYPE="reset" VALUE="Reset"><BR>
                   <INPUT TYPE="submit" NAME="button"
                          VALUE="Send">
                   </FORM>


[Try it]

                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Image maps

An image map is an image that when clicked on sends all the data that has
been entered into the form plus the x,y co-ordinates of the position
clicked on to a CGI script. For example:

 Generated form HTML markup required
                 <FORM ACTION="URL"
                 <INPUT NAME="image" TYPE="IMAGE"
 [image]                SRC="../../pic/mas_fn50.jpg" ALIGN=TOP>
                 </FORM>


When a point on the image is selected (clicked) the position is sent to a
CGI script.

A common use of an image map is to create customized buttons, or regions in
an image that allow a user to navigate to a new document.

[Try it]

                 -----------------------------------------
        ------------------------------------------------------------
                 -----------------------------------------

[Index]  Hidden field in a form

The protocol used to communicate with a CGI script is stateless, that is no
information is remembered about the transaction. To preserve state
information for later recovery a hidden field in a form can be created
which can hold state information.

For example, in playing the game of noughts and crosses a CGI script is
used to respond with the computers move as a web page. In this generated
web page is a hidden field which contains state information about the
current position of the game. When a player responds with a new move, the
state information is used by the CGI script to reconstruct the last
position.

To make this process secure the state information would not be a record of
the moves made, but an encrypted index to where the current position of the
game was held on the server.

 Generated form HTML markup required

                 <FORM ACTION="URL"
 Move            Move<BR>
                 <INPUT TYPE="hidden" NAME="game" VALUE="P123456">
                 <INPUT TYPE="text" NAME="move" SIZE=2>
                 </FORM>


Of course several of these HTML form tags may be combined together to
produce a form that requests several pieces of data.