A form provides an interface through which you can gather information from users who visit your web site. The user enters information into the form and then submits it.
HTML forms consist of two parts:
The CGI script is a program that runs on the web server and processes the contents of the form. You will either have to write the script yourself, use a script that someone else has written (there are many available), or get a programmer to write it for you. It will need to be placed in a special directory on the web server--so you will also need to talk to your web master.
HTML FORM Tags
Within an HTML document, a FORM tag is used to specify a fill-out form. The syntax of this tag is
<FORM METHOD="method" ACTION="url"> ... </FORM>
The <INPUT> tag defines several different types of fields which request input from the person using the form. The type of field is identified by the TYPE parameter. Other parameters, some necessary and some optional, make up the rest of the INPUT tag.
The TEXT type creates a box in which text can be entered. A NAME parameter is required to identify the name of the field. The name is not displayed by the web browser but it is used by the CGI program to identify the input that the user enters in this field. Optional parameters are:VALUE = the initial value of the fieldThe <INPUT> tag used to create the following text field looks like this:
SIZE = the length of the field
MAXLENGTH = the maximum length of the input field.<input type="text" name="firstname" value="Tom" size="10">
The PASSWORD type is the same as the TEXT type except that the characters entered will be displayed as bullets or astericks. Try typing in the box below. The parameters for the PASSWORD type are the same as for the TEXT type.
The <INPUT> tag used to create the following text field looks like this:<input type="password" name="password" size="10">
The CHECKBOX type displays a box which can be checked on or off. If the box is checked on, the browser returns a value of on to the CGI script for that variable when the form is submitted. Optional parameters are:VALUE = a text string used to override the value of "on" if the box is checked (eg., "yes")The <INPUT> tags used to create the following checkboxes look like this:
CHECKED = a tag which indicates that the box should be initially checked (turned on).<input type="checkbox" name="Computer"> <input type="checkbox" name="Stereo"> <input type="checkbox" name="VCR"> <input type="checkbox" name="moreinfo" CHECKED>
The SUBMIT type creates a button which, when clicked, submits the form data to the CGI script for processing. Optional parameters are NAME and VALUE. NAME would be used if you have multiple submit buttons so that the CGI script could distinguish what action to take and VALUE is the label that appears on the button (default=Submit). Every form needs at least one submit button otherwise the form cannot be sent to the CGI script.
The <INPUT> tag used to create the following submit button looks like this:
<input type="submit" value="Process Form">
The RESET type creates a button which clears all of the information entered by the user and allows him/her to start over again. The reset button accepts the optional parameter VALUE. VALUE is the label which appears on the reset button (default=Reset).
The <INPUT> tag used to create the following reset button looks like this:
<input type="reset" value="Clear Form">
The TEXTAREA tag defines an area in the form where the user can enter more than one line of information. A NAME parameter is required to define the name of this field. Also, you must define how large you want the area to be with the ROWS, and the COLS parameters. The TEXTAREA tag must be closed with a </TEXTAREA> tag. Within the beginning and ending TEXTAREA tags you can put any default information that you want to appear in this field.
The tags used to create the following textarea field looks like this:
<textarea name="comments" rows="10" cols=50">
Please enter any comments you may have below:
The SELECT tag is used to define two types of user input fields, menus and scrolled lists. Like the TEXTAREA tag, the SELECT tag has both a beginning tag, <SELECT>, and an ending tag, </SELECT>. The SIZE parameter determines whether a menu or a scrolled list is displayed. If SIZE=1, a menu is displayed. If SIZE is greater than 1, a scrolled list is displayed. The NAME parameter is required to identify the name of the field.
Menu or list items are added with the OPTION tag, one OPTION tag for each item. Optional parameters for the OPTION tag are VALUE and SELECTED. If an OPTION tag has a VALUE parameter associated with it, that value is sent to the CGI script if that particular item is selected; otherwise, the value is the string of text that actually appears in the menu or list. SELECTED just means that the item will be preselected (highlighted) on the form.
The scrolled list has one more option that the menu does not have and it goes with the SELECT tag itself, not with the OPTION tags. MULTIPLE specified on the SELECT tag indicates that more than one item in the list can be selected.
The <SELECT> tags used to create the following menu looks like this:
<option value="Pick">Pick an area of interest
<option value="Computer">Computers and Technology
<option value="Science">Math and Science
The table below summarizes the various form tags that are available along with their required and optional parameters
||<FORM ACTION="url" METHOD="method">|
||<INPUT TYPE="text" NAME="name" OPTIONS>
OPTIONS: VALUE="value" SIZE="size" MAXLENGTH="size"
||<INPUT TYPE="password" NAME="name" OPTIONS>
OPTIONS: VALUE="value" SIZE="size" MAXLENGTH="size"
||<INPUT TYPE="hidden" NAME="name" VALUE="value">|
||<TEXTAREA NAME="name" ROWS="rows" COLS="cols">
any default text goes here...
||<INPUT TYPE="checkbox" NAME="name" OPTIONS>
OPTIONS: VALUE="value" CHECKED
||<INPUT TYPE="radio" NAME="name" VALUE="value" OPTIONS>
<OPTION OPTIONS> first menu entry goes here
<OPTION OPTIONS> second menu entry goes here
OPTIONS: VALUE="value" SELECTED
||<SELECT NAME="name" SIZE="size" OPTIONS1>
<OPTION OPTIONS2> first menu entry goes here
<OPTION OPTIONS2> second menu entry goes here
OPTIONS2: VALUE="value" SELECTED
||<INPUT TYPE="image" SRC="image-source" OPTIONS>
||<INPUT TYPE="submit" OPTIONS>
OPTIONS: NAME="name" VALUE="value"
||<INPUT TYPE="reset" OPTIONS>