forms

introduction
Forms are self-explanatory: they are web page forms that can be filled in with various data by the user. What is done with this data? Well, that's up to the author. Often, the data will be sent to a CGI script for processing and a response. Other times, a script may be written to perform client-side actions based on the form. Either way, the syntax for the form itself is fairly simple.

the <form> tag
Every form starts with a <form> tag. This tag does several things.

It tells the browser where the form begins.
It specifies what will be done with the data once the form is filled out.
It specifies how this will be accomplished.

The tag typically looks like this:

<form action="http://www.myserver.com/cgi-bin/script.cgi" method="POST">

As you can see, it has two parameters: action and method.

Action specifies where to send the data once the form is submitted. In this case, it is a CGI script. For more information on this, see the Webworks CGI section.
Method specifies one of two ways in which the data can be sent.
- The GET method appends the data to the URL request. I'm sure you've seen areas on the Web where the URL ends up being a mile long; these generally utilize the GET method.
- The POST method sends the data directly to the receiver on the other end. It is preferable for various technical reasons which are explained in the CGI section.

input fields
Input fields are where the user enters the data to be submitted. These can be, for instance, text boxes, check boxes, radio buttons, etc. Forms that will be submitted to a CGI script must have at least one input field: a SUBMIT button that the user presses to send the data along. Fields are created with the <input> tag:

<input TYPE=(type) NAME=(name) VALUE=(value)>

TYPE specifies the input type, one of the options below.
NAME specifies a unique name for this field - for instance, if it's a field where the user enters their e-mail address, it might be named "email". Or, if it's where they enter their zipcode, it might be named "zip". The naming of a particular field is up to you - but it must correspond to what the CGI script on the other side will look for.
VALUE can mean different things depending on the TYPE.
Some input types support special arguments, which will be noted below.

There are many types of input fields:

TEXT - a simple text box that the user can type into.
PASSWORD - identical to a text box, but text appears as asterisks for security.
CHECKBOX - a checkbox that can be in an on or off state
RADIO - a toggle button; usually part of a group, where only one radio button in the group can be selected.
HIDDEN - a hidden field. Nothing is shown to the user; usually used to pass form-specific data to a CGI script.
SUBMIT - creates a submit button that sends the form along.
RESET - creates a Reset button that restores all values on the form to their defaults.
SELECT - multiple items (of which only one can be selected) appear in a drop-down list box.
TEXTAREA - like a text box, but can have more than one line.

With the exception of the last two, all of the input fields are created with the <input> tag described earlier.

TEXT fields
TEXT fields are the simplest type of input: a simple text box where the user enters a short bit of text. An additional parameter, SIZE, can be used to specify the size of the textbox.

The VALUE parameter to the input tag is used to specify default text that will show up in the textbox when the form is first shown. It can be omitted to have no default text.

Example:

<input TYPE="TEXT" NAME="TEXT1" VALUE="Example TEXT"> <input TYPE="TEXT" NAME="TEXT2" VALUE="Example TEXT 2" SIZE=50>

PASSWORD fields
Identical to the text box, except input is masked with asterisks.

<input TYPE="PASSWORD" NAME="PASSWORD1" VALUE="mypassword">

CHECKBOX fields
A simple box that the user can click on to put it in an either on or off state. The VALUE parameter specifies the text that is sent along to the CGI script when the box is checked. Using the CHECKED argument, you can also create a check box that is checked by default.

Apples Oranges

<input TYPE="CHECKBOX" NAME="CHECK1" VALUE="Apples" CHECKED="True">Apples <input TYPE="CHECKBOX" NAME="CHECK2" VALUE="Oranges">Oranges

RADIO fields
A radio button that, like the checkbox, can be in an on or off state. Radio buttons are generally part of a group; of this group, only one of the boxes can be on. To make a radio button group, give each button in the group the same NAME. Like the check box, the VALUE parameter specifies the text associated with the button and the CHECKED parameter specifies which of the radio buttons is selected.

Yes No

<input TYPE="RADIO" NAME="GROUP" VALUE="Yes" CHECKED="True">Yes <input TYPE="RADIO" NAME="GROUP" VALUE="No">No

HIDDEN fields
A hidden field is not shown to the user, but it is sent to the CGI script. It is usually used to send some constant data along to a CGI script. For instance, if a CGI script handles multiple forms, a hidden field might be used to tell the script which form it is getting data from.

<input TYPE="HIDDEN" NAME="HIDDEN1" VALUE="Hidden Field 1">

SUBMIT fields
This creates a SUBMIT button that, when pressed, performs the ACTION specified in the <form> tag. VALUE specifies text that will appear on the button.

<input TYPE="SUBMIT" NAME="SUBMIT1" VALUE="Submit it, dude!">

RESET fields
This creates a RESET button that, when pressed, restores the entire form to its default state.

<input TYPE="RESET" NAME="RESET1" VALUE="Oops, I messed up...Reset!">

SELECT fields
SELECTs do not use <input> tags. Rather, they have their own tags, <select> and <option>. SELECTs present drop-down listboxes with options, one of which can be selected. The SELECT tag has a NAME parameter that works the same way as <input>'s. The best way to show this is by example:

<select name="fruit"> <option>Apples <option>Oranges <option>Peaches </select>

TEXTAREA fields
TEXTAREAs are a lot like textboxes, except they are designed to hold a lot more text. They can be more than one line, and their size can be controlled both horizontally and vertically. While a TEXT might be used to hold a person's name, a TEXTAREA might be used to hold, for instance, a paragraph description of that person. the <TEXTAREA> tag has three genreally used parameters: NAME, which you should know by now, ROWS, specifying the number of horizontal rows to have in the TEXTAREA, and COLS, specifying the number of vertical columns.

<TEXTAREA NAME="TEXTAREA1" ROWS=5 COLS=10> </TEXTAREA> <TEXTAREA NAME="TEXTAREA2" ROWS=7 COLS=12> TEXTAREA with default text </TEXTAREA>

Click here to go back to the table of contents.