FORMS BY EXAMPLE

Adapted from: Rob Baker
At: NPAC

Rob Baker's Original Forms Tutorial

Example 1 Text Box

Example 4 Selection List 1

Example 7 Text Area

Example 2 Checkbox

Example 5 Selection List 2

Example 8 Submit/Reset

Example 3 Radio Buttons

Example 6 Selection List 3

Sample Form

OVERVIEW:

Towson University: (read the red type)
This tutorail has been adapted to use with the TU email form you can download at:
http://www.towson.edu/~jack/html/stud_frm.html

Ignore the "FORM ACTION="URL" METHOD="POST">..." tag below -- the TU Form Template does the form tag for you. Just look at the examples below to apply to the TU form template elements that you design.

A FORM tag is used in an HTML document which has a start tag <FORM>, and an end tag, </FORM> and has a structure similar to the following:

<FORM ACTION="URL" METHOD="POST">****form contents******</FORM>

A form's contents are broken into elements such as the INPUT, SELECT, and TEXTAREA elements which are described in detail in the bellow examples. Forms are submitted through the use of the SUBMIT input type, and can be cleared through the use of the RESET input type

Example 1

Text field that allows users to type in information:

Example 2

Checkbox that allows the users to choose numerous selections:

<INPUT TYPE="checkbox" Name="checkbox-1">Chocolate

<INPUT TYPE="checkbox" Name="checkbox-2">Strawberry

<INPUT TYPE="checkbox" Name="checkbox-3">Vanilla

What's your favorite ice cream?

Chocolate Strawberry Vanilla

Example 3

Radio buttons for only one selection:

<INPUT type="radio" Name="sex" Value="M">Male

<INPUT type="radio" Name="sex" Value="F">Female

<INPUT type="radio" Name="sex" Value="A">Don't know yet

Enter your gender:

Male Female Don't know yet

Example 4

Selecting ONE item from a list:

<OPTION> Braveheart

<OPTION> Terminator2

<OPTION> Usual Suspects

<OPTION> Basic Instinct

</SELECT>

Select a movie:

Example 5

Selecting one item from a list with more than one item visible:

<OPTION> Violent Femmes

<OPTION> Everclear

<OPTION> Nine Inch Nails

<OPTION> Urge Overkill

</SELECT>

Select an musical artist:

Example 6

Selecting more than one item from a list:

<OPTION> Coke

<OPTION> Dr Pepper

<OPTION> Mountain Dew

<OPTION> Sprite

<OPTION> Beast

</SELECT>

Pick a few of your favorite drinks:

Example 7

Sample of a text area for submitting comments and such:

Any comments?

Example 8

Submit and reset buttons:

A Sample Form

Please fill out the following form: