A Webmaster's Guide to HTML

Download

Forms

Right, before I go any further let me say that I am not going to go into detail about CGI (Common Gateway Interface) scripts, as for one thing I don't know overmuch about them and secondly because most people who read this aren't going to be able to use them on their own servers anyway (see note later about free CGI sites).

Forms are a method whereby the user can tell you something about themselves, give comments or fill in a survey. This is done with check-boxes, text-entering boxes, and comment boxes, along with radio buttons, pull-down lists, normal lists, and command buttons.
The way this is done is to first specify that what you are about to put in is a form, which is done by using the <FORM> & </FORM> tag. Inside this tag we put the address that the results of the form should be mailed to: in most people's case their e-mail address. This is done by incorporating the commands METHOD and ACTION. This is done in the following way:

<FORM METHOD=POST ACTION=MAILTO:someaddress@someserver.com>
</FORM>

In between the two form tags you can place the objects listed in the earlier paragraph as follows:

Checkboxes:

<INPUT TYPE="checkbox" CHECKED NAME="Check1" VALUE="Labelling Text">
(CHECKED makes the check box default to being ticked, which is optional, the VALUE attribute is the text that you want as the lable for the check-box, and the NAME attribute, also optional, is used for script referencing).

Radio Buttons: Option 1 Option 2 Option 3

Option 1<INPUT TYPE="radio" NAME="RadioSet1"> Option 2<INPUT TYPE="radio" NAME="RadioSet1"> Option 3<INPUT TYPE="radio" NAME="RadioSet1">
Radio buttons are so that the user can only select one option, otherwise use check-boxes. Setting all of the radio buttons in a group to have the same NAME attribute makes it possible for the user to only select one option. Obviously, you can only set one to CHECKED!

Text Input Boxes:

<INPUT TYPE="text" SIZE="10" MAXLENGTH="15" NAME="Text1" VALUE="Some Text">
SIZE is the physical size of the box, the MAXLENGTH attribute specifies the maximum number of characters that may be entered in that text-box. The VALUE attribute can be used to put some text in the box when the page loads that the user can then edit later or completely delete.

Text Areas:

<TEXTAREA ROWS=x COLS=y NAME="TArea1" VALUE="Initial Text"></TEXTAREA>
Where x and y are numbers, (1 = space taken up by one "m"), and the NAME and VALUE attributes are as above.

Pull down lists:

<SELECT NAME="Select1"><OPTION>An Option<OPTION SELECTED>Another Option...</SELECT>
You specify each option in the list with an <OPTION> tag. The one to be selected when the user opens the page must have the SELECTED attribute in its <OPTION> tag. You can set this drop down list up so that users can make multiple selections the same way as defined below.

Selection Boxes:

<SELECT NAME="Select2" MULTIPLE SIZE="2"><OPTION SELECTED>An Option<OPTION>Another Option...</SELECT>
This is a slight variation of the above tag. The HEIGHT attribute is set to how many options you want displayed at once, the overflow can be looked at using a scrollbar. If you want the user to be able to be able to select multiple items, place MULTIPLE in the opening <SELECT> tag. Multiple options are selected by holding down the shift key (for all options between the two clicked points), or holding down the control key, and clicking the individual items you want to select. (N.B. It is a good idea to tell your users how to make multiple selections too!).

Command Buttons:

<INPUT TYPE="submit" VALUE="Submit Form"> & <INPUT TYPE="reset" VALUE="Reset Form">
The user clicks these to send the form to you or to reset it. You can also use an image as a submit button, by setting the TYPE attribute to ="IMAGE" and adding an SRC attribute to specify the image filename.

In HTML 4.0 you can now create command buttons which simply start scripts. For a long time it was tedious to start off a script from a submit button, but it is now possible to do it from a button which actually doesn't do anything else!:

<BUTTON>Click Here!</BUTTON>

Unfourtunately Microsoft Internet Explorer 3.0x does not support the sending (submit) part, and just comes up with a blank email message for the user to fill in when they click on submit. This problem can be got round of with CGIs, as these are programmes on the server which interpret the information given and act accordingly, in this case they just send you an email telling you how people filled in your form, all in a readable format. Unfourtunately, for those of us that don't have CGIs but do have Netscape, this form sends an email to the right address and it is readable, but only just, as spaces come out as weird characters, as well as new lines and slashes. A good way to get round this whole hopeless business is go to http://www.cgi-free.com/ and sign up for a free mailing CGI. They'll tell you how to incorporate the code into the form's ACTION attribute.

A typical form looks something like this:

<FORM METHOD=POST ACTION="mailto:someemail@someserver.com">
Please type your name here <INPUT TYPE="text" NAME="textbox1" SIZE="40" MAXLENGTH="10"> <BR>
Single: <INPUT TYPE="radio" NAME="Marital Status" VALUE="Single"><BR>
Married: <INPUT TYPE="radio" NAME="Marital Status" VALUE="Married"><BR>
Living with your parents <INPUT TYPE="radio" NAME="Marital Status" VALUE="parents"><BR>
Type in anything else about yourself you think we ought to know: <BR>
<INPUT TYPE="textarea" HEIGHT=20 WIDTH=40><BR>

<INPUT TYPE="submit" VALUE="SEND">
<INPUT TYPE="reset" VALUE="RESET">
</FORM>

Click Here to see the Resulting Page

Lastly, try doing a mail-to form yourself. Include a name and address section of boxes, a comments box, a few checkboxes and radio buttons, and if you want, a pull down list, whose first option should really be a few words saying what the list is for, instead of having a lable beside it.

This page hosted by Get your own Free Home Page