Forms

How to Create a Form

Forms are created using the HTML <FORM> tag. There are two primary attributes for the <FORM> tag. The ACTION attribute tells the browser the URL where the data from the form should be sent. This will usually be the CGI program that will handle the form output. The METHOD attribute indicates how the data will be sent to the URL in the ACTION tag. The two METHOD options will be discussed below. The end of the form is specified with the </FORM> closing tag. There are three tags which can be used within the form to specify different entry fields. They are <INPUT>, <TEXTAREA>, and <SELECT>.

The `<INPUT>` Tag

The <INPUT> tag is used to create the boxes, buttons, and most other fields through which the user can input data. This is a standalone tag like the <IMG> tag. No closing tag is necessary. The options include

TYPE

This specifies the type of input field. The options are:

text - The default value. This is a one line text entry field

password - Like the text field, but the characters are displayed as asterisks

checkbox - A single toggle button

radio - A single button like the checkbox. However, all radio buttons with the same name are grouped together and only one may be selected at a time.

submit - A button that submits the form to the URL

reset - A button that resets all the inputs to their default values

NAME

The name that will be used by the browser to return the information for the the input field. This will not be displayed and must be present for all input types except


     reset

and submit

VALUE

When used with a text field, this is the default value for the entry. When it is used with a


     checkbox

or radio button, it specifies the value of the input field when it is selected. For the reset and submit fields, it specifies the text that will appear in the button.

CHECKED

This is only used with checkboxes and radio buttons. It specifies that the button is checked by default. If it is not present, the default is not checked.

SIZE

Used with the text and password fields, this specifies the size of the field in characters. The default is 20.

MAXLENGTH

Also used with the text and password fields, the MAXLENGTH is the maximum number of characters that may be entered. If it is greater than SIZE the the field will scroll as necessary.

An single line text input field would look something like this:

     <INPUT TYPE=text NAME="text entry" VALUE="Default Text">

The `<TEXTAREA>` Tag

This tag is used to generate multiline text entry fields. Unlike the <INPUT> tag, <TEXTAREA> requires both opening and closing tags. The text between the two tags is the default entry for the field. There are three attributes for the <TEXTAREA> tag.

NAME: This is identical to the NAME attribute of the <INPUT> tag
ROWS: Specifies the number of rows in the TEXTAREA.
COLS: Specifies the number of columns in the TEXTAREA.

The TEXTAREA contains scrollbars so that the user can enter more text than is allowed by the window size. A sample TEXTAREA would look like:

     <TEXTAREA NAME="TextLines" ROWS=5 COLS=40>
     This is the default stuff that goes in the TEXTAREA
     </TEXTAREA>

The `<SELECT>` Tag

The <SELECT> tag is used to generate menus and scrolled lists. Like the <TEXTAREA> tag, <SELECT> requires both an opening and closing tag. Within the <SELECT> tag, there are multiple <OPTION> tags followed by text. These represent the different menu options. No other HTML tags may be used with the <OPTION> text.

The attributes for the <SELECT> tag are

NAME: Just like the other NAME attributes
SIZE: This is used to specify the number of elements in a scrolled list. If SIZE is greater than 2, it specifies the number of visible items in the list. If it is not present or equal to 1, the <SELECT> option will be displayed as a menu.
MULTIPLE: If present, multiple selections are enabled and the display is forced to a scrolled list.

The <OPTION> tag has a single attribute, SELECTED, which sets the default value of the option to selected. Here is a sample SELECT item:

     <SELECT SIZE=3 MULTIPLE>
     <OPTION>Choice 1
     <OPTION>Choice 2
     <OPTION SELECTED>Choice 3
     <OPTION>Choice 4
     </SELECT>

Form Output

As mentioned above, there are two types of form output, GET and POST. These are specified in the METHOD attribute of the form. If the GET method is used, the form contents are appended to the ACTION URL in the format:

    ACTION_URL?name=value&name=value&name=value .....

Where 'name' is the value specified in the NAME attribute. For text fields, the value is the character string the user entered. If it is empty, the name= portion is sent, but the value is empty. For checkboxes and radio buttons, the value is equal to the <VALUE> attribute if the item is selected. If it is not selected, nothing (not even the name=) is sent.

The POST method is similar to the GET method except the user input is sent as data that can be accessed as a variable in the CGI program rather than appended to the URL. The same encoding scheme is used.

Sample Form

Here is a sample form. It uses one of the default servers to test the output. If you want to test your own form without writing a CGI program to read the data, you can use:

ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query" for POST forms

ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/query" for GET forms

Other Forms Resources

NCSA Forms Information
ECN Forms Tutorial
Yahoo's Forms Directory

ieeecs@ecn.purdue.edu
Last Updated 1-30-96