Tags for creating forms in HTML

© Mike Smith M.A.Smith@brighton.ac.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
* 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
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 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"
        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
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

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.
The material in these WWW page(s) is copyright © M.A.Smith August 1995
Last modified 24 February 1996