Line


Forms


Line



Forms are used to collect information from internet users who visit your web site. Like most other tags, the form tags must be located between the two <BODY> tags. Keep in mind different types of forms may be combined between the <FORM> tags.

This tag begins a form:

<FORM METHOD="post" ACTION=mailto:user_name@e-mail_address>

</FORM> This tag ends a form.

All other form tags are written between these two <FORM> tags.There are various form tags that may be placed between the two basic <FORM> tags. These tags can create check boxes, scrolling menus, reset buttons, submit buttons, password fields, radio buttons, text boxes, and text blocks.


Check Boxes

This code is written for each checkbox:

<INPUT TYPE="checkbox" NAME="group_name" VALUE="identifying_word">text that will be seen.

Example of tags and code for check boxes:

<FORM METHOD="post" ACTION=mailto:bgibson@theriver.com>

<INPUT TYPE="checkbox" NAME="colors" VALUE="red">Red
<INPUT TYPE="checkbox" NAME="colors" VALUE="blue">Blue
<INPUT TYPE="checkbox" NAME="colors" VALUE="yellow">Yellow
<INPUT TYPE="checkbox" NAME="colors" VALUE="green">Green
</FORM>


Menus

Each menu begins with this tag:

<SELECT NAME="group_name" SIZE="number of items to be displayed">

This code is written for each menu item:

<OPTION VALUE="identifying_word">text that will be seen.
</SELECT> Each menu ends with this tag.

Example of tags and code for a menu:

<FORM METHOD="post" ACTION=mailto:bgibson@theriver.com>

<SELECT NAME="occupations" SIZE="5">
<OPTION VALUE="actor">Actor
<OPTION VALUE="artist">Artist
<OPTION VALUE="author">Author
<OPTION VALUE="broker">Broker
<OPTION VALUE="chef">Chef
<OPTION VALUE="doctor">Doctor
<OPTION VALUE="lawyer">Lawyer
<OPTION VALUE="teacher">Teacher
<OPTION VALUE="manager">Manager
<OPTION VALUE="mechanic">Mechanic
<OPTION VALUE="musician">Musician
<OPTION VALUE="realtor">Realtor
</SELECT>
</FORM>

Notice the SIZE="5" code above. There are more than five items listed. However, the "SIZE" is set to show only five items at one time. The scroll bar will allow the other items to be viewed, but only five at a time.


Reset Buttons

<INPUT TYPE="reset" VALUE="Text Seen"> The tag for a reset button.

Example tag of a reset button:

<INPUT TYPE="reset" VALUE="Clear All">

Submit Buttons

<INPUT TYPE="submit" VALUE="Text Seen"> The tag for a submit button.

Example tag of a submit button:

<INPUT TYPE="submit" VALUE="Send Info">

Password Fields

The tag for a password field is fairly simple:

<INPUT TYPE="password" NAME="Password" SIZE="Length of field in character spaces" MAXLENGTH="Maximum characters allowed">

Example tag of a password field with the password intrepid:

<INPUT TYPE="password" NAME="intrepid" SIZE="10" MAXLENGTH="15">

Text Boxes

The tag for a text box is also easy:

<INPUT TYPE="text" NAME="identifying_word" SIZE="Length of field in character spaces" MAXLENGTH="Maximum characters allowed">

Example tag for a text box:

<INPUT TYPE="text" NAME="team" SIZE="15" MAXLENGTH="10">

Text Blocks

The tag for a text block is fairly simple:

<TEXTAREA NAME="identifying_word" ROWS="Length of the text block in number of rows" COLS="Width of the text block in number of columns">Text to be viewed at the beginning of the text block.</TEXTAREA>

Example tag for a text block:

<TEXTAREA NAME="comments" ROWS="10" COLS="75">Write your comments here:</TEXTAREA>

Radio Buttons

The tag for a radio button is fairly simple:

<INPUT TYPE="radio" NAME="group_name" VALUE="identifying_word">Text that will be viewed.

Example code and tags for a group of radio buttons:

<FORM METHOD="post" ACTION=mailto:bgibson@theriver.com>

<INPUT TYPE="radio" NAME="schools" VALUE="dodge">Dodge Middle School
<INPUT TYPE="radio" NAME="schools" VALUE="doolen">Doolen Middle School
<INPUT TYPE="radio" NAME="schools" VALUE="mansfield">Mansfield Middle School
<INPUT TYPE="radio" NAME="schools" VALUE="naylor">Naylor Middle School
<INPUT TYPE="radio" NAME="schools" VALUE="utterback">Utterback Middle School
<INPUT TYPE="radio" NAME="schools" VALUE="valencia">Valencia Middle School

</FORM>

Different types of forms may be combined between <FORM> tags.




© Barbara Gibson, October 1996
Fourth Edition, January 1998



HTML Tutorial Table of Contents
Beginning your HTML Document/ Simple HTML Tags
Simple Anchors & Links/ The Hexadecimal System/ Wallpaper & Colors
Gathering Graphics for Your Web Page / Adding Graphics & Graphic Links / Tables / Forms
Frames/ Image Maps