Forms

All form elements must reside between the FORM tags: <FORM> </FORM>.

You must specify the ACTION="serverURL", which specifies the URL of the program to be invoked when the form is submitted, and the METHOD, which specifies how the information is sent to the processing program. METHODs include:

GET - appends the input information to the URL
POST - sends the input information in a data body.

The opening FORM tag would then look like this:
<FORM METHOD="POST" ACTION="http://www.myURL.com/cgi-bin/FormMail.pl">

Here are some of the elements that can be contained in a form:

TEXT INPUT BOX:
Please enter your name:

The code for text input is:
Please enter your name: <INPUT TYPE="TEXT" NAME="realname" SIZE="34">

Options include MAXLENGTH="maxChars" which specifies the maximum number of characters a text box can accept and SIZE="lengthChars" which specifies the length of the input field, in characters.

RADIO BOX:
IBM or clone

The code for the radio box is:
<INPUT TYPE="RADIO" NAME="Computer" VALUE="IBM">IBM or clone

By giving 2 or more Radio Boxes the same NAME, the user will be allowed to check only one box:

What type of computer do you own?
IBM or clone
Macintosh
Sun

However, if each selection has a different NAME, the user can select more than 1 box:
What type of computer do you own?
IBM or clone
Macintosh
Sun

CHECK BOX:
A Checkbox is a toggle that the user can either select or deselect
Pleasure

The code for the checkbox is:
<INPUT TYPE="CHECKBOX" NAME="Use" VALUE="Pleasure">Pleasure

As an option, you can present the Checkbox to the user as already selected, by including the option CHECKED in the code: <INPUT TYPE="CHECKBOX" NAME="Use" VALUE="Pleasure" CHECKED>Pleasure

Pleasure

SELECTION LIST:
A Selection List displays a list of options from which the user can select an item.

The code for a selection list is:
<SELECT NAME="Browser">
<OPTION SELECTED VALUE="Netscape_5.0">Netscape 5.0
<OPTION VALUE="Netscape_6.0">Netscape 6.0
<OPTION VALUE="Netscape_7.0">Netscape 7.0
<OPTION VALUE="Microsoft_Internet_Explorer_5.0">Microsoft Internet Explorer 5.0
<OPTION VALUE="Microsoft_Internet_Explorer_6.0">Microsoft Internet Explorer 6.0
<OPTION VALUE="Mozilla">Mozilla
<OPTION VALUE="America_Online_Browser">America Online Web Browser
<OPTION VALUE="Other">Other
</SELECT>

By using the MULTIPLE option, users can select more than one option:
<SELECT MULTIPLE NAME="Browser">

TEXT AREA:
A text are defines a multiline input field. The user can enter words, phrases or numbers. You can define the number of characters per line the text area can accomodate without scrolling by supplying the COLS attribute. You can specify the number of lines that appear without scrolling by supplying the ROWS attribute.

Please add your comments here:

The code for the Text Area is:
<TEXTAREA WRAP="PHYSICAL" NAME="Comments" ROWS="6" COLS="50">

SUBMIT BUTTON:
When the user clicks the Submit Button, the form is submitted, invoking the ACTION specified for the form.

The code for the Submit Button is:
<INPUT TYPE="SUBMIT">

You can control the text on the Submit Button with the VALUE="label" attribute:
<INPUT TYPE="SUBMIT" VALUE="Send the Data">

RESET BUTTON:
When the user presses the Reset Button, all elements in the form are reset to their default values.

The code for the Reset Button is: <INPUT TYPE="RESET">

Like the Submit Button, you can also specify the text on the Reset Button:

Form Validation

By using JavaScript, you can check the contents of the form for required entries before the form is submitted.

Form Validation page or Main Menu.

If you have any problem browsing these pages, please contact stevegrn@comcast.net

This page was last modified