.

Home page

.

Basic HTML

.

Forms

.

CGI scripts

.

Frames

.

System

.

Java

.

Tags for creating forms in HTML

© Mike Smith M.A.Smith at brighton dot ac dot uk University of Brighton UK.

Contents

Form filling Simple forms Multiple elements Multiple lines of input Check boxes Radio button Pop up list Reset values Hidden form element Mailing contents of form Sending a local file to the web server Image maps Server side image maps Client side image maps

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 scripts resides and runs on the machine running the web server from which web pages are delivered. The CGI script returns as its result a text stream representing a web page. This web page contains all the normal text nad markup tags of a conventional web page. The only difference is that it is prefixed with the text:

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 (by the ACTION attribute) CGI script for processing.

The script is confined to being in the cgi-bin directory or nominee on the machine running the web server. The location of the cgi-bin directory is defined by the web administrator for the machine running the web server. This will usually be in a directory named cgi-bin.

Simple forms

A form to request the user to enter text which is to be sent to the CGI script "URL" is shown below. "URL" is the Uniform resource location of the cgi script on the server machine. A simple text window which consists of a single line of 20 characters initialized to the text "Your name" is introduced by the <INPUT> tag as illustrated below:

 <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:

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.

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

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:

 <FORM ACTION="URL">
 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.

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:

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.

 <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.

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:

 <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:

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:

 <FORM ACTION="URL">
 <INPUT TYPE="radio" NAME="sex" VALUE="M">Male<BR>
 <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:

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

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:

 <FORM ACTION="URL">
 Use<BR>
 <INPUT TYPE="checkbox" NAME="use"
        VALUE="Ada 95" CHECKED>Ada 95<BR>
 <INPUT TYPE="checkbox" NAME="use"
        VALUE="C++" CHECKED>C++<BR>
 <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.

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:

 <FORM ACTION="URL">
 Media used is<BR>
 <SELECT NAME="Media">
         <OPTION SELECTED> Disk
         <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.

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.

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

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.

 <FORM ACTION="URL">
 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.

Mailing the contents of a form

Warning
This only works in Netscape 2.0 and greater.

By using a form with the following attributes:
<FORM METHOD=post ACTION="mailto:Your e-mail" ENCTYPE="text/plain">
the results when a browser fills in the form are posted to your e-mail address. Of course for this to work, the mail preferences must be set up in the users browser.

 <FORM METHOD=post ACTION="mailto:name@site"
                   ENCTYPE="text/plain">
 <INPUT TYPE="text" NAME="name"
        SIZE=20 VALUE="Your name">
 

Sending a local file to the web server

A new attribute to the <FORM> tag allows a browser to transmit the contents of a local file back to the web server. Using this facility a browser can up-load a file to the server. For example:

<FORM ENCTYPE="multipart/form-data"
      ACTION="URL"
      METHOD=POST>
Send file name:<BR>
  <INPUT NAME="message"
         TYPE="file"> <BR> <BR>
  <INPUT TYPE="submit"
         VALUE="Send file to server">
</FORM>
 

Image maps introduction

An image map allows an action to be associated with the selecting by clicking of part of an image. There are two possibilities:

• Server side
  In which the co-ordinates of the location selected are sent to the server to be processed by a CGI program. There exist standard CGI scripts to turn co-ordinates sent to the server into the return of the contents of a file specified by a URL associated with that area. The information about which area is associated with which URL is held on the server.
• Client side
  In which the co-ordinates of the location selected are associated with the action of selecting a URL. The area selected may be a circle, rectangle or polygon.
  As the URL is selected on the client side, the subsequent processing will be faster.

 <FORM ACTION="URL">
 <INPUT NAME="image" TYPE="IMAGE"
        SRC="pic/mas_fn50.jpg" ALIGN=TOP>
 </FORM>
 

Client side image maps

A client side image map is an image that has URL's associated with various hot spots on its surface. The hot spots may be a circle, rectangle or polygon. When a hot spot is selected (clicked on) a hyper text link is made to the associated URL. The hot spots on the image are defined using the <MAP> and <AREA> tags. This is termed a client side image map as the information about where the hot spots are on the image is held in the loaded html page.

For example, in the following client side image map, clicking in the top left hand corner of the picture will cause a transfer to the section on server side image maps. While clicking in the bottom right corner of the picture will cause a transfer to the section on hidden fields.

Generated form	HTML markup required
	<MAP NAME="Map_one"> <AREA SHAPE=RECT COORDS = "0,0,40,40" HREF="html2.html#FORM-Imap"> <AREA SHAPE=RECT COORDS = "100,65,140,105" HREF="html2.html#FORM-Hidden"> </MAP> <IMG SRC="mas_fn50.jpg" ALT=Mike USEMAP=#Map_one>

The attributes of the <MAP> tag are:

NAME

Names the map.

The attributes of the <AREA> tag include:

SHAPE

Defines the shape of the area that is the hot spot. These areas can be RECT (Rectangle), POLYGON or CIRCLE. If omitted RECT is assumed.

AREA

Defines the area of the hot sport.
RECT -> Top left hand corner, Bottom right corner.
POLYGON -> Points of polygon.
CIRCLE -> Center circle , radius

The extra attribute of the <IMG> tag is used with client side image maps is:

USEMAP

Names the image map used. Note the prefix of #.

---

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.

---

---

© M.A.Smith University of Brighton. Created July 1995 last modified June 1999. Comments, suggestions, etc. M.A.Smith at brighton dot ac dot uk * [Home page] [CGI Environment variables]