Some command tags inside the <FORM> </FORM> tag pair follow a particular format:

<INPUT NAME=(Field Name) TYPE=(Type of input)>

NAME: The name of the input “field” (each data element is called a “field”). This should usually be short but descriptive of the contents. Not required for SUBMIT or RESET, but every other <INPUT> type requires this.
TYPE: What type of field this should be displayed as. Some options are: SUBMIT, RESET, HIDDEN, TEXT, PASSWORD, CHECKBOX, RADIO.

Certain <INPUT> tags require additional parameters.

Only one <INPUT> tag is absolutely required for any form: SUBMIT. This tag creates a button on the screen that, when clicked, sends the current contents of the form to the process specified by the ACTION parameter of the <FORM> tag, using the method specified by the METHOD parameter of the <FORM> tag.

The SUBMIT <INPUT> tag has one important parameter: VALUE. Whatever the VALUE parameter is set to is what will be displayed inside the button.

EXAMPLE:

<INPUT TYPE=“SUBMIT” VALUE=“Click To Send Info”>

The RESET <INPUT> type creates a button that, when clicked, clears the form of any and all current contents, essentially allowing the viewer to “start over.” It is usually placed next to the SUBMIT <INPUT> type.

Once again, the VALUE parameter of the RESET <INPUT> tag will show what is displayed on the button that clears the form when clicked.

EXAMPLE:

<INPUT TYPE=“RESET” VALUE=“Click To Clear Form”>

Sometimes, a Web designer may need to pass some information automatically to the process when a form is submitted, without the need for the viewer to enter it, or even see it. When this is required, the HIDDEN <INPUT> tag is used.

The HIDDEN <INPUT> tag passes whatever information is contained in the VALUE parameter to the process under the field name designated by the NAME parameter. No indication that the tag even exists appears on the page.

EXAMPLE:

<INPUT TYPE=“HIDDEN” NAME=“Message Title” VALUE=“Form Sent From Web Page”>

The TEXT <INPUT> type is probably the most commonly used. It displays a “fill-in” box on the Web page that the viewer can click in and type anything.

Whatever is typed into the “fill-in” box is passed to the process under the field name designated by the NAME parameter.

Two other parameters are useful: SIZE and MAXLENGTH. SIZE is the width of the “fill-in” box on screen (in terms of number of characters). MAXLENGTH is the maximum number of characters that can be entered in the “fill-in” box by the user.

EXAMPLE:

<INPUT TYPE=“TEXT” NAME=“Customer Name” SIZE=25 MAXLENGTH=30>

The PASSWORD <INPUT> type is exactly like the <TEXT> input type in that it creates a “fill-in” box on the Web page that the user can click on and type anything in, and it sends whatever is typed in it to the process under the name designated by the NAME parameter.

The difference between the TEXT and PASSWORD types is that a PASSWORD field displays a “code” character (usually an asterisk [ * ] or a dot [ • ] ) on screen instead of the actual letters being typed in.

EXAMPLE:

<INPUT TYPE=“PASSWORD” NAME=“Login Password” SIZE=10 MAXLENGTH=10>

The CHECKBOX <INPUT> type creates a small “check box” on the screen. A viewer can click on this box to mark it as checked or unchecked. If it is checked, the value “TRUE” will be submitted to the process under the field name designated by the NAME parameter. If it is unchecked, the value “FALSE” will be submitted.

The Web designer can have the box checked by default when the form is displayed by adding the CHECKED parameter to the <INPUT> tag.

EXAMPLE:

<INPUT TYPE=“CHECKBOX” NAME=“Mailing List” CHECKED>

The RADIO <INPUT> type creates a small button on the screen. The user can click on this button to select it, and when the form is submitted, the value associated with the VALUE parameter is passed to the process under the field name designated by the NAME parameter.

The RADIO type is the only <INPUT> tag that can have multiple occurances with the same NAME parameter. Only one RADIO tag with the same NAME can be selected at any one time; this is useful when you want the user to have a choice of several options.

The term “RADIO” is used because the function operates like car radio buttons: pressing one changes the “station,” and only one “station” can be on at the same time.

Example:

<INPUT TYPE=“RADIO” NAME=“Buffalo Wing Level” VALUE=“Hot”> Hot <BR>
<INPUT TYPE=“RADIO” NAME=“Buffalo Wing Level” VALUE=“Really Hot”> Really Hot <BR>
<INPUT TYPE=“RADIO” NAME=“Buffalo Wing Level” VALUE=“Inferno”> Inferno <BR>
<INPUT TYPE=“RADIO” NAME=“Buffalo Wing Level” VALUE=“Suicidal”> Suicidal <BR>

The <TEXTAREA></TEXTAREA> tag pair creates a multi-line area of space on the screen that the user can click on and type anything in, much like a very large TEXT <INPUT> box.

The ROWS parameter sets how many rows of text are displayed in the TEXTAREA, and the COLS parameter displays how many characters wide the TEXTAREA is.

The TEXTAREA will pass whatever is typed into its content area to the process under the field name designated by the NAME parameter when the form is submitted.

An additional parameter, WRAP, controls how text “wraps” when a user types anything that goes beyond the right edge of the TEXTAREA. Valid options for the WRAP parameter are: OFF, PHYSICAL, and VIRTUAL.

• OFF: Text does not wrap from line to line unless the user hits a carriage return (Enter or Return key)
  
  
• PHYSICAL: Text automatically wraps from line to line on screen and is sent to the process with “carriage returns” automatically inserted in the appropriate places.
  
  
• VIRTUAL: Text automatically wraps from line to line on screen but is sent to the process with no “carriage returns” inserted.

EXAMPLE:

<TEXTAREA NAME=“Comments” WRAP= “VIRTUAL”>Enter comments here</TEXTAREA>

The <SELECT> </SELECT> tag pair creates a “list box” which the user can select choices from by clicking on them. The value(s) of the choice(s) that are selected are passed to the process under the field name designated by the NAME parameter. The Web designer can enable the user to select multiple items from the list by adding the MULTIPLE parameter.

The Web designer can also control how many choices from the list are visible on the screen at any one time by use of the SIZE parameter. For example, setting this parameter to SIZE=4 indicates four choices will be displayed on screen at any one time.

Each choice for a <SELECT> is set up by an <OPTION></OPTION> tag pair, which must appear between the <SELECT> and </SELECT> tags.

Each <OPTION> tag should have a separate value associated with it; this is the value passed to the process when this option is selected. This value is designated by the VALUE parameter.

If the Web designer has not implemented the MULTIPLE option on the <SELECT> tag pair, a “default selected” option can be set by adding the SELECTED parameter to one of the <OPTION> tags.

EXAMPLE:

<SELECT SIZE=3 NAME=“Animals I Like” MULTIPLE>
<OPTION VALUE=“Dogs”>Dogs</OPTION>
<OPTION VALUE=“Cats”>Cats</OPTION>
<OPTION VALUE=“Ferrets”>Ferrets</OPTION>
<OPTION VALUE=“Huh?”>Duckbill Platypii</OPTION>
</SELECT>