Web Forms - Input Examples

On this page you'll find the examples which are mentioned in the Forms Tutorial.
This is NOT a working form. It merely exists to show you what the types of input look like in conjunction with the HTML that created them.
To find a very simple form template ready for you to use, click here.
Form a form template that includes all of the features shown below, Click Here.
In both cases, please change the form action line to your real email address.

1. INPUT Example - Text Field

Enter your e-mail address:

HTML code for the text field:
<FORM>Enter your e-mail address: <INPUT TYPE="TEXT" NAME="e-mail" SIZE="20"></FORM>

2. INPUT Example - Radio Button
Select your operating system:

Windows 3.1 Windows 95 Mac OS

HTML code for the radio buttons:
<FORM>Windows 3.1 <INPUT TYPE="RADIO" NAME="operating system" VALUE="win3.1" CHECKED> <BR>Windows 95 <INPUT TYPE="RADIO" NAME="operating system" VALUE="win95"> <BR>Mac OS<INPUT TYPE="RADIO" NAME="operating system" VALUE="Mac"></FORM>

3. INPUT Example - Checkboxes
Which of the following search engines do you use?:

Google
Infoseek
Excite
Lycos
HotBot

HTML code for the checkboxes:
<FORM><INPUT TYPE="CHECKBOX" NAME="search" VALUE="aol" CHECKED>AOL NetFind<BR><INPUT TYPE="CHECKBOX" NAME="search" VALUE="infoseek" >Infoseek<BR><INPUT TYPE="CHECKBOX" NAME="search" VALUE="excite" >Excite<BR><INPUT TYPE="CHECKBOX" NAME="search" VALUE="lycos" >Lycos<BR><INPUT TYPE="CHECKBOX" NAME="search" VALUE="hotbot" >HotBot</FORM>

4. INPUT Example - SUBMIT and RESET button

HTML code for the SUBMIT and RESET button:
<FORM><INPUT TYPE="SUBMIT" VALUE="Send"> <INPUT TYPE="RESET" VALUE="Reset"></FORM>

5. TEXTAREA Example

HTML code for the TEXTAREA:
<FORM><TEXTAREA NAME="info" ROWS=3 COLS=60 WRAP="physical"></TEXTAREA></FORM>

6. SELECTION Examples
a. Simple Selection List
Select your favorite color:

HTML code for the selection list:
<FORM><SELECT NAME="state"> <OPTION>Choose Color <OPTION>Red <OPTION>Green <OPTION>Blue <OPTION>Yellow <OPTION>Orange <OPTION>Purple <OPTION>Other </SELECT></FORM>

Take me back to the tutorial, this is giving me a headache.
Copyright PCRobin.com, 2002. Do not reproduce without permission.