A site that encourages people to keep returning is referred to as being 'sticky'. Interactivity is a large contributor to making your site warrant this description - and one of the most interactive aspects of HTML is forms. They give the user a hands-on experience and enable the site developer to collect input from users.

This column will familiarise you with forms and introduce you to several input types. Next month we will investigate more advanced form elements, such as drop- down menus, text areas, and how to submit and reset data that has been entered.

Forms explained

A form is an HTML display with questions and fields in which the user enters data. Depending on your coding, user information may be entered via typing text, checking a box, clicking a radio (round) button, or selecting from a drop-down menu. When a user clicks the Submit button, information is sent to a predetermined e-mail address.

Forms have three levels. The first is the HTML look/feel and base structure. Second is the added functionality provided by JavaScript: e.g., if a field is left empty, an alert box may advise that data is required before continuing. The third level is the use of databases to store the information the user has entered, for further manipulation.

We will look at the first level, i.e., the HTML implementation of forms. It is important, therefore, to reiterate that we are only concerned with e-mailing the information to a given address.

Starting your form

All forms require an opening and closing command. This opening command is extremely important, as it tells the computer where to send the information once the Submit button is pressed, and what format it will be in.

<FORM method="post"
action="mailto:heidi_woof@idg.com.au?Subject=MyForm" enctype="text/plain">

The first property in this example states that the information will be 'posted'. The action attribute defines the e-mail address where it will be sent. The end part of the action value (?Subject=MyForm) automatically places the word 'MyForm' into the subject field of the mail client. The final attribute stands for 'encryption type' and ensures the information will be displayed in the body of the e-mail in a clean list format. If this property is omitted, the data will instead be sent as an attachment, with all fields concatenated in a hard-to-read format).

The next stop is to decide which form types to use. With all form items, you must define a name. This allows the computer to temporarily store information under a given label for identification.

Text

The most common form element is one that allows the user to enter text.

Enter First Name: <INPUT TYPE="text" name="fname">

This code prompts the user to enter their name in the blank box displayed. If submitted, this will be sent to the predefined e-mail address with the label 'fname'. Two other properties you may use are value and size. If you add value="name here", the browser will display this text within the previously empty box as a default value. 'Size' allows you to change the length of the display box.

Password

Password is similar to text input, except that the user entry is displayed as asterisks. When received in e-mail form, however, the value of 'pword' will display as text.

Enter Password: <INPUT TYPE="password" name="pword" size="60">.

Checkbox & Radio

Checkbox displays square boxes that the user can tick, while radio displays a series of round buttons. In addition to appearance, the main difference between them is that checkbox allows a user to select multiple items; with radio buttons, the user is limited to selecting only one.

Select your favourite foods:

<input type="checkbox" name="food" value="spaghetti" checked>Spaghetti
<input type="checkbox" name="food" value="vegies">"Vegetables

Checkboxes and radio both require the 'value' property, which defines what will be returned as the field value. With the above example, if the user ticked the box next to 'Vegetables', the e-mail would say Food=Vegies. You can select a default value by inserting 'checked'. In this example, the 'Spaghetti' value would already be selected when the form is loaded.

It is very important to ensure that the name for the various options is the same. If I had accidentally named one of these 'foods' instead (notice the extra 's'), the return e-mail would consider them as two separate fields, returning food=spaghetti and foods=vegies.