Quick FORM Reference

This page gives a quick, brief description of the various tags used in forms: FORM, INPUT, TEXTAREA, SELECT, and OPTION. I created this page because I don't want to memorize all of this stuff. Remember, not all web browsers completely support every aspect of forms.

This page DOES NOT cover the construction of CGI programs, it DOES covers the construction of the FORMs that run them. Also, this is a reference page, not a tutorial.

FORM options covered are...

Initializing Forms (FORM tag)
Single-line Text Entry Boxes
Password Entry Boxes
Multi-line Text Entry Boxes
Submit Buttons
Reset Buttons
Other Buttons
Image Buttons
Passing information (HIDDEN values and text)
Check Boxes
Radio Buttons
Lists
Pop-up Menus

[HOME][BACK]

Created: 11/10/95

Last Updated: 12/19/95

Problems? Errors? Additions? Comments? Email me at: st94k82g@post.drexel.edu.

Initializing Forms (FORM tag)

<FORM {METHOD=POST/GET} ACTION="PATH_TO_CGI_FILE">
ALL_FORM_ITEMS_AND_ANY_TEXT_GO_HERE </FORM>

ACTION must lead the the CGI file that will process the data and return resulting html or a link to a page. Remember, data is sent to the CGI program in NAME/VALUE pairs. If the value is empty, a NAME/VALUE pair will probably not be sent at all, although this just means you need to create a variable with an empty string. PERL users won't even need to worry about that. The SUBMIT and RESET buttons send nothing-- and choosing RESET does not run the CGI.
If METHOD is...
- ommitted: it will assumed to be POST.
- GET: The data will be appended to the URL. The data will be unsecure-- and if the data list is too long, it may be truncated.
- POST: The data will be sent after the connection is established. The data may or may not be secure (depending on the server's connection-- most web browsers will warn you of this). The data list may conceivably be of any length.
Any text or tags may be used between form tags, but, of course, this is where all or the form displaying tags go. The display tags are: INPUT, TEXTAREA, SELECT, and OPTION.

Single-line Text Entry Boxes

<INPUT {TYPE=TEXT} NAME="TEXT_NAME" {VALUE="DEFAULT_TEXT"} 
{SIZE=DISPLAY_SIZE} {MAXLENGTH=ACTUAL_SIZE}>

Example:

<input type=text name="text" value="Default text goes here" size=25 maxlength=25>

The TYPE modifier should be set to TEXT, although if ommitted, it will assumed to be TEXT.
The NAME modifier is required for the the browser to pass the data.
VALUE is used to set a default entry. If left out, the entry box will be left blank.
SIZE will determine how the entry box looks. If left out, a default will be used.
MAXLENGTH will determine how much actual typing room you have in characters. If left out, the default will be infinite.
NOTE: Although SUBMIT buttons are usually required to submit data (see below), if one Single Line Text Entry Box or one Password Entry Box is used, most browsers will submit the data when the return or enter key is pressed. Remember, though, this is not always true.

Password Entry Boxes

<INPUT TYPE=PASSWORD NAME="TEXT_NAME" {VALUE="DEFAULT_TEXT"} {SIZE=DISPLAY_SIZE} {MAXLENGTH=ACTUAL_SIZE}>

Example:

<input type=password name="password" value="icu" size=8 maxlength=8>

The TYPE modifier must be set to PASSWORD.
The NAME modifier is required for the the browser to pass the data.
VALUE is used to set a default entry. If left out, the entry box will be left blank.
SIZE will determine how the entry box looks. If left out, a default will be used.
MAXLENGTH will determine how much actual typing room you have in characters. If left out, the default will be infinite.
NOTE: Password Entry Boxes use single-line entry with bulleted characters.
NOTE: Although SUBMIT buttons are usually required to submit data (see below), if one Single Line Text Entry Box or one Password Entry Box is used, most browsers will submit the data when the return or enter key is pressed. Remember, though, this is not always true.

Multi-line Text Entry Boxes

<TEXTAREA NAME="TEXT_NAME" {ROWS=NUM_OF_ROWS} {COLS=NUM_OF_COLS}>
DEFAULT_TEXT_GOES_HERE </TEXTAREA>

Example:

<textarea name="textarea" rows=5 cols=40>I type; therefore, I am.</textarea>
I type; therefore, I am.

The NAME modifier is required for the the browser to pass the data.
ROWS will determine how vertically long the box appears. If left out, a default will be used.
COLS will determine how horizontally long the box appears. If left out, a default will be used.
Default text goes between the tags. If it empty, the text box will be too.
NOTE: As far as I know, those are all of the modifiers for TEXTAREA. Also, the text box appears to have to no maximum limit to the row or columns that may be typed.

Submit Buttons

<INPUT TYPE=SUBMIT {VALUE="DEFAULT_TEXT"}>

Example:

<input type=submit value="Submit the DUMMY form">

The TYPE modifier must be set to SUBMIT.
VALUE will set the button's text. If left out, a default will be used (probably "submit").
NOTE: SUBMIT buttons are required if more than one Single Line Text Entry Box or one PassWord Entry Box is used. Also, a few browsers require them even if you do meet the criterea-- so do yourself a favor and use the SUBMIT button in all forms-- besides, it's good style :).
NOTE: SUBMIT buttons send no data themselves.

Reset Buttons

<INPUT TYPE=RESET {VALUE="DEFAULT_TEXT"}>

Example:

<input type=reset value="Reset the DUMMY form">

The TYPE modifier must be set to RESET.
VALUE will set the button's text. If left out, a default will be used (probably "reset").
NOTE: RESET buttons do, just that, reset all form text and defaults to normal. They have nothing to do with the actual sending of the data or likewise have data to send.

Other Buttons

<INPUT TYPE=BUTTON NAME="SOME_NAME" {VALUE="DEFAULT_TEXT"}>

Example:

<input type=button name="button" value="This is a button">

The TYPE modifier must be set to SUBMIT.
The NAME modifier is required for the the browser to pass the data.
VALUE will set the button's text. If left out, a default will be used.
NOTE: I'm not totally sure how BUTTON really works. I'll update this section when I'm sure.

Image Buttons

<INPUT TYPE=IMAGE NAME="SOME_NAME" SRC="PATH_TO_IMAGE_FILE">

Example:

<input type=image name="image" src="image.gif">

The TYPE modifier must be set to IMAGE.
The NAME modifier is required for the the browser to pass the data.
SRC will lead to an image file to set the button's appearence.
NOTE: This seems to work like a submit button. Also, if you used the POST method, the image will be treated as an image map (i.e. the clicked coordinates will be sent in the URL).
NOTE: Image modifiers, such as HEIGHT, WIDTH, BORDER, and such will work on this tag for images. Refer to a tutorial on loading images for more info.

Passing information (HIDDEN values and text)

<INPUT TYPE=HIDDEN NAME="SOME_NAME" VALUE="SOME_VALUE">

Example:

<input type=hidden name="hidden" value="you can't see me">

The TYPE modifier must be set to HIDDEN.
The NAME modifier is required for the the browser to pass the data.
VALUE contains the value or text your passing along.
NOTE: An alternitive to this is to pass the info through the URL-- but if it's, say, a game, then the passed data may be seen in the address (depending on the browser) and used to cheat. It can always be encoded, though.

Check Boxes

<INPUT TYPE=CHECKBOX NAME="SOME_NAME" VALUE="SOME_VALUE" {CHECKED}>

Example:

<input type=checkbox name="checkbox1" value="01" checked> <input type=checkbox name="checkbox2" value="02">

The TYPE modifier must be set to CHECKBOX.
The NAME modifier is required for the the browser to pass the data.
VALUE, I believe, is required. This will be the returned value if the box is checked. If it is not checked, a NAME/VALUE pair will not be returned.
If CHECKED is included, the box will be checked by default, otherwise it will not.
NOTE: The NAMEs of multiple check boxes should probably be kept sepperate. Remember, if the box is not checked, a NAME/VALUE pair will not be sent back.

Radio Buttons

<INPUT TYPE=RADIO NAME="SOME_NAME" VALUE="SOME_VALUE" {CHECKED}>

Example:

<input type=radio name="radio1" value="01" checked> <input type=radio name="radio1" value="02"> <input type=radio name="radio2" value="01"> <input type=radio name="radio2" value="02">

Note: The first two radio buttons are linked together. The last two radio buttons are linked together. But the left two are seperate from the right two.

The TYPE modifier must be set to RADIO.
The NAME modifier is required for the the browser to pass the data.
VALUE, I believe, is required. This will be the returned value if the radio button is marked. If it is not marked, a NAME/VALUE pair will not be returned.
If CHECKED is included, the radio button will be marked by default, otherwise it will not.
NOTE: Radio buttons with the same name are linked together. Radio buttons with different names are not. Remember, if you do not mark a default radio button in a group of linked radio buttons, it is possible the NAME/VALUE pair for it will not be sent-- because the form was submitted with all the radio buttons unmarked.

Lists

<SELECT NAME="SOME_NAME" SIZE=SOME_NUMBER_GREATER_THAN_1 {MULTIPLE}>

<OPTION {SELECTED}>...

</SELECT>

Example:

<select name="select_2a" size=5> <option>item 1 <option>item 2 <option>item 3 <option selected>item 4 <option>item 5 <option>item 6 <option>item 7 </select> <select name="select_2b" size=5 multiple> <option selected>item 1 <option>item 2 <option selected>item 3 <option>item 4 </select>

Note: List 1 is scrollable. List 2 allows multiple selections.

The NAME modifier is required for the the browser to pass the data.
SIZE will determine how long the list box will be. It is scrollable if there are enough items. Also, if you use 1 for the size, then it is no longer a List, it is a Pop-up Menu (see below).
Use MULTIPLE if you want the user to be able to select multiple items. Otherwise, they will only be able to select one.
Each list item in the List is preceded by OPTION-- and all are enclosed in the SELECT tag.
Every item that uses the SELECTED modifier will be appear selected. Note, that this may not be true in non-multiple lists. Also, if SELECTED is not used, nothing will appear selected.
NOTE: I'm not exactly sure how you receive data from multiple selections.

Pop-up Menus

<SELECT NAME="SOME_NAME" SIZE=1>

<OPTION {SELECTED}> SOME_TEXT...

</SELECT>

Example:

<select name="select_1" size=1> <option>item 1 <option selected>item 2 <option>item 3 </select>

The NAME modifier is required for the the browser to pass the data.
SIZE must be 1, otherwise you're contsructing a List (see above).
Each list item in the Pop-up Menu is preceded by OPTION-- and all are enclosed in the SELECT tag.
Only one item or no items should use the SELECTED modifier. This, of course, sets the default item. If none of the items use it, the first one will be the default item.

[HOME][BACK] [TOP]