Form Tools

This form is a sample of various tools that may be used when creating forms:

Single text entry field


Code:
Name: <INPUT SIZE=40 NAME="field1">
<INPUT TYPE="HIDDEN" NAME="name1" VALUE="Name">

Result:
Name:

Note: The SIZE=40 attribute is optional. Leaving a SIZE out, however, allows the user to enter as much information as they want, into millions of characters.

Password Protection

Code:
Enter your password: <INPUT TYPE="password" NAME="password" VALUE="new_user">

Result:
Enter your password:

Multi Line Text Entry

Code:
Your comments here:
<TEXTAREA NAME="Comments" ROWS="5" COLS="60">You type in here </TEXTAREA>
<INPUT TYPE="HIDDEN" NAME="Comments" VALUE="Comments">

Result:
Your comments here:


Check Boxes

Code:
Select the additional items you with to have installed:
<INPUT TYPE="CHECKBOX" NAME="OptionPreferred" VALUE="Option1"> Additional Item 1
<INPUT TYPE="CHECKBOX" NAME="OptionPreferred" VALUE="Option2"> Additional Item 2
<INPUT TYPE="CHECKBOX" NAME="OptionPreferred" VALUE="Option3"> Additional Item 3
<INPUT TYPE="HIDDEN" NAME="field3" value="Additional_Items">

Result:
Select the additional items you with to have installed:
Additional Item 1

Additional Item 2

Additional Item 3



Toggle or Radio Buttons

Code:
Choose one of the following:
<INPUT TYPE="RADIO" NAME="ChooseOne" VALUE="Choice1"> Choice 1
<INPUT TYPE="RADIO" NAME="ChooseOne" VALUE="Choice2"> Choice 2
<INPUT TYPE="RADIO" NAME="ChooseOne" VALUE="Choice3"> Choice 3
<INPUT TYPE="HIDDEN" NAME="field4" VALUE="PickOne">

Result:
Select the additional items you with to have installed:
Choice 1
Choice 2
Choice 3



Option Menus

Code:
What was the shape?: <SELECT NAME="field 5">
<OPTION SELECTED VALUE="Sphere">Sphere
<OPTION VALUE="Cube">Cube
<OPTION VALUE="Cone">Cone
<OPTION VALUE="Cylinder">Cylinder
</SELECT>
<INPUT TYPE="HIDDEN" NAME="name5" VALUE="Shape">

Result:
What was the shape?:

Note: The SELECTED attribute is optional.


Scrolling selection lists

Code:
What was the color?
(Use the <I>Control</I> or <I>Command</I> key to select more than one):
<SELECT NAME="field 6" MULTIPLE SIZE=5>
<OPTION VALUE="Red">Red
<OPTION VALUE="Orange">Orange
<OPTION VALUE="Yellow">Yellow
<OPTION VALUE="Green">Green
<OPTION VALUE="Blue">Blue
<OPTION VALUE="Purple">Purple
<OPTION VALUE="Copper">Copper
<OPTION VALUE="Silver">Silver
<OPTION VALUE="Gold">Gold
<OPTION VALUE="White">White
<OPTION VALUE="Gray">Gray
<OPTION VALUE="Black">Black
</SELECT>
<INPUT TYPE="HIDDEN" NAME="name6" VALUE="Shape">

Result:
What was the color?:
(Use the Control or Commandkey to select more than one):


Submitting The Form

Code:
Please be certain all information is complete before you <INPUT TYPE="submit" VALUE="Submit the order">.
To reset the form and start over, you can <INPUT TYPE="reset" VALUE="Clear Form">.

Result:
Please be certain all information is complete before you .
To reset the form and start over, you can or just go back.
©Ken Kaleta 1997, 1998, 1999