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


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

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

 

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

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
Enter PIN Number
 <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.

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

Generated form HTML markup required
Age
<18
18-65
65+
 <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>
 

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
Use
Ada 95
C++
COBOL
 <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.

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
Media used is

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

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
I like to drink:
Coffee
Tea

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

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

Try it

 

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

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

Try it

 

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

Generated form HTML markup required
Send file name:


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

Try it

 

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

Index Server side image maps

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

Generated form HTML markup required

 <FORM ACTION="URL">
 <INPUT NAME="image" TYPE="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 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
Mike
   <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] CGI