When your first web page is up on the World Wide Web, why not apply for our Good Start Award?

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:

<FORM ACTION="mailto:form-owner@isp.com" METHOD="POST" ENCTYPE="application/x- www-form-urlencoded">
...
</FORM>

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:

<FORM ACTION="http://my-isp.com/cgi-bin/script.cgi" ...

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:

<INPUT TYPE="text" NAME="Text1" VALUE="Text typed here" SIZE=20 MAXLENGTH=20>

and would appear 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:

<TEXTAREA NAME="Textarea1" MAXLENGTH=60 ROWS=3 COLS=20>Initial text</TEXTAREA>

Initial text

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:

<SELECT NAME="Listbox1" SIZE=3>
<OPTION>Item one
<OPTION>Item two
<OPTION>Item three
<OPTION>Item four
</SELECT>

Item one Item two Item three Item four

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:

Item one Item two Item three Item four

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:

<SELECT NAME="Listbox1" SIZE=3 MULTIPLE>
<OPTION>Item one
<OPTION>Item two
<OPTION>Item three
<OPTION>Item four
</SELECT>

Item one Item two Item three Item four

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:

<INPUT TYPE="checkbox" NAME="Checkbox1" VALUE="First Checkbox" CHECKED>Click the box to uncheck it

Click the box to uncheck it

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:

<INPUT TYPE="radio" NAME="Radio1" VALUE="First button" CHECKED>First button<BR>
<INPUT TYPE="radio" NAME="Radio1" VALUE="Second button">Second button

First button
Second button

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:

<INPUT TYPE="submit" NAME="submit" VALUE="Submit">     <INPUT TYPE="reset" NAME="reset" VALUE="Reset">

     

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.