Forms are all about getting feedback from users of your site. This section of the tutorial shows you how to create a form on
your web page. What it doesn't do is tell you how to get at the information the user typed into the form --
that opens up a whole new can of worms and is dealt with in the next section.
As usual there is a tag pair to indicate the start and finish of the form -- <FORM>...</FORM>. Other
attributes must be added to the opening <FORM> tag to tell the browser how to deal with the content when the
user clicks the SUBMIT button:
The ACTION you specify will depend on the method you are going to use to retrieve the information the user types into your
form. Using "mailto:" will not always work (Internet Explorer 3 won't handle this type of ACTION). If you are
using a CGI script (see the next section on Using Your Form) then the action should
specify the location and script you are using, for example:
The METHOD can be either POST or GET. POST will work in most cases. The ENCTYPE specifies how the response will be
encoded. The one used above is the default. Detailed discussion of the METHOD and ENCTYPE are really beyond this
brief introduction to HTML.
Inside the <FORM>...</FORM> tags go other tags representing the various types of form elements. These form
elements are shown below.
Text Element and Password Element
The Text Element allows the user to type a single line of text. The Password Element is similar, but the actual text is
displayed as asterisks for security reasons. Both these elements use the same tag layout. A text box would be specified
like this:
Changing the TYPE to "password" would produce a Password element. The NAME will be passed back to you when
the user clicks the SUBMIT button on your form. The VALUE part of the tag specifies any text which is to appear in the
text box before the user types anything, and can be left out if you don't want any initial text to be displayed. SIZE and
MAXLENGTH set the actual size of the text box and the maximum number of characters the user will be allowed to enter
-- MAXLENGTH can be larger than SIZE if you want.
Text Area Element
If you want your users to be able to type more than one line of text, use a Text Area Element. The code below places a Text
Area element in the form:
Note that this is a tag pair (<TEXTAREA>...</TEXTAREA>) unlike the Text and Password elements. Any text
which you want to appear initially in the element is placed between the opening and closing tags. In addition to the
MAXLENGTH you also specify the number of ROWS and COLS (columns) to appear in the Text Area.
List Box Element and Drop-Down List Element
These two elements are actually the same. They both list a number of choices from which the user can make a selection. The
difference is that the List Box shows a number of choices at once, whereas the Drop-Down List displays only one
initially. The code below places a List Box in the form:
In this case, four options are available, but only three (SIZE=3) are initially visible. "Item two" is initially
selected. Changing SIZE to 1 produces a drop-down list:
In the code above, the user can only select one item. Adding the attribute MULTIPLE to the <SELECT> tag allows the
user to select as many items as he/she wishes by holding down the CTRL key while clicking each item:
Check Box Element
Check Box elements allow the user to check or uncheck each item by clicking the box. To place a check box in your form use
the following code:
This is another INPUT tag, but with TYPE="checkbox". You can place the text you want to appear alongside the
checkbox either before or after the tag depending on the alignment you want. Leave out the CHECKED part of the tag
if you don't want the check box to be initially checked.
Radio Button Element
The radio button elements are used in groups. Only one radio button in a group may be selected at any one time. In the
example below I have put two radio buttons:
You should notice that both radio buttons have the same NAME (Radio1). This makes them work as a group so that only one
button can be checked at a time. Because of this, only one of the button should contain the CHECKED
attribute.
Submit and Reset Button Elements
Conventionally your form will contain both a button for the user to click when he/she wants to submit the contents of the
form, and another button if he/she wants to clear the form and start again (a Reset button). The coding for these
buttons is shown below:
Whatever you put as the VALUE of the button will be used as the text on the button face. It doesn't have to be
"Submit" and "Reset", but most users will recognise the meaning of these names.
Hidden Element
It may seem odd to have an element which is invisible to the user, but the hidden element can be used to return information
along with the other content of the form. As an example, the code below will insert a Hidden element into the form so
that when you receive the data you know which web page the form came from:
<INPUT TYPE="hidden" NAME="Hidden1" VALUE="Data returned from Guestbook
page">
Using Your Form
Now that you know how to create the individual elements of a form, try constructing a complete form. Once you are
confident with this, go on to the next section which tells you about Using Your
Form.