Lesson 8

Forms

Introduction
Forms usually use CGI (Common Gateway Interface), a program that resides on your Internet Service Providers Server. Ask their technical support team if they supply the code that enables you to take advantage of CGI. If not, then you will have to rely on HTML! Alternatively, there are some sites that offer a form service. Try....

If your ISP does not provide CGI scripts, but allows you access to their CGI bin, try...

A form can be presented to the user within a table. This gives a more form-like appearance when you use a different background color

HTML in forms

The form tag

<form method="post" action="mailto:your email address" enctype="text/plain">

This is a pure HTML tag. Alternatively you can have a CGI tag which is something like:-

<form method+"post" action="url/cgi-bin/formmail.pl" name="Feedback_Form" onsubmit="return validate();">
<input>
...
<input>
</form>

You can have as many of the input tags as you need.

Input tags

<input type="text" name="" value="" size="" maxlength="" />

The text type of input is just that. The name should reflect the expected data e.g. "First name", "Last name" or "email address". The size indicates the size of the input box. The text can be shorter or longer than this value. The value displays a default text in the input box. The max length specifies the maximum length of the input text. See this example.

<input type="password" name="" />

The password type of input displays a dot for each character entered.

<input type="hidden" name="" value="" />

A hidden type of 'input' allows for items not entered by the user, e.g. 'subject'. It could also be used if a web site carries several almost identical forms to identify which is which.

<textarea name="" rows="" cols="" />

The textarea is type of input in which you specify a box deeper than one line.

Special optional inputs
These inputs are either circular (radio) buttons or square (check) buttons. The difference between these is that for radio buttons, one and one only is checked, while for check buttons any number from zero up to all may be selected.

<input type="radio" name="" value="" checked />
<input type="checkbox" name="" value="yes" />

Note - For Check Boxes the NAME changes and the VALUE stays the same and with Radio Buttons, the VALUE changes but the NAME stays the same.

A pull down list

<select name="">OR
<option value="">
...
<option value="">
</select>

If your user clicks on one of the options, that is the returned value.

A scrolling list
The 'size' attribute shows how deep is the displayed portion of the list.

<select name="" size="">

The 'selected' attribute on one of the options shows the default choice.

<option value="" selected />
</select>

Form buttons

<input type="submit" value="" />
<input type="reset" value="" />

The 'submit' button sends the form off to you. The 'reset' button clears the form should the user change their mind. The value is the text that appears on the button. A form to send you a file from your user

<form enctype="multipart/form-data">
<input type="file" name="myfile" />
</form>

A button to take your user to another page

<form action="URL OF ANOTHER PAGE">
<input type="submit" value="NAME OF THE OTHER PAGE" />
</form>

Click here for another example page.

Validation
One cause of concern to web authors is the accuracy of the data that they receive. There seems to be no absolute method of validation. However, there are javascripts which check that the data is plausible. E.G. an entered email address is in the right form. One possible approach is to ask that sensitive data is repeated.

One validation technique that is becoming more common is to ask the user to copy the characters displayed in a graphic. This is to ensure that the user is a human and not a robotic program!

Table
This could be one of the exceptions that proves the rule. Using a table can make the form look a lot more tidy. See this example.

Previous Lesson

Next Lesson