Prev NEXT

How CGI Scripting Works

Creating a Real Form

A real form is going to be made up of a variety of input areas, and it will require some amount of code in the script to undo the character mappings and parse out the individual strings. Let's start by looking at the standard input controls on a form. They include:

  • Single-line text input
  • Multi-line text input
  • Selection lists
  • Check boxes
  • Radio buttons
  • Specialized buttons for submitting or clearing the form

You can combine these controls with other static text and graphics as you would on any other page.

Advertisement

Here are several examples that demonstrate the use of the different control tags:

Single-line edit

The word "input" identifies a single line edit area. The "name" field provides an identifier for the control to the CGI script and should be unique for each control on the form. The "size" field indicates the width, in characters, of the input area on the form. "Maxlength" constrains the maximum number of characters in the input area. "Value" sets an initial value.

Enter Name: <input name="Name" size=30 maxlength=50
value="Sample">

Typically, the input area is preceded by a piece of static text identifying the purpose of the input field. Shown here is the static text "Enter name:".

You can add the value "type=int" to constrain input to integer values. By default, the type is "text" and it accepts any characters.

Multi-line edit

A multi-line edit area is similar to a input area. You define a name for the control, and you define its size on the form in rows and columns. Anything you put prior to the </textarea> tag will appear in the control as a default value.

<textarea name="Company Address" cols=30
rows=4></textarea>

Check boxes

A check box is a specialized form of an input area with the type set to "checkbox".

<input type=checkbox name="Include" value=1>

The value will be returned if the checkbox is selected.

Radio buttons

Radio buttons are similar to check boxes, but they're grouped together visually:

Choose the search area:<br>
<input type=radio CHECKED name=universe value=US-STOCK>
Stocks
<input type=radio name=universe value=CA-STOCK>
Canadian Stocks
<input type=radio name=universe value=MMF>
Money Markets
<input type=radio name=universe value=MUTUAL>
Mutual Funds

Note that the default radio button can be marked with the word CHECKED. Also note that all radio buttons in the same group have the same name.

Selection lists

A selection list offers the user a choice from a number of options. The tag for a selection list lets you specify the number of visible rows in the "size" field, as well as the values for all of the options.

Select an Option<br>
<SELECT size=2 NAME="Option">
    <OPTION> Option 1
    <OPTION> Option 2
    <OPTION> Option 3
    <OPTION> Option 4
</SELECT>

The word MULTIPLE creates a multi-selection capability.

Specialized buttons

The following tags create two specialized buttons, one to submit the form to the server and one to reset the form:

<INPUT TYPE=submit value="Submit">
<INPUT TYPE=reset value="Reset">
Citation