Next up are Radio Buttons and Check Boxes. Radio buttons allow the user to choose one of several options. Check Boxes allow the user to choose one or more or all of several options.
First let's build some Radio Buttons. 

<FORM>
<INPUT TYPE="radio" NAME="BEST FRIEND">
</FORM>

Now add 2 more.

<FORM>
<INPUT TYPE="radio" NAME="BEST FRIEND">
<INPUT TYPE="radio" NAME="BEST FRIEND">
<INPUT TYPE="radio" NAME="BEST FRIEND">
</FORM>

Hmmm... I suppose we could insert a couple line breaks. 

<FORM>
    <INPUT TYPE="radio" NAME="BEST FRIEND">
<BR><INPUT TYPE="radio" NAME="BEST FRIEND">
<BR><INPUT TYPE="radio" NAME="BEST FRIEND">
</FORM>



Note that each input has the same name. The reason will become apparent very shortly.

Each of the Radio Buttons must be assigned a VALUE. 

<FORM>
    <INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Ed">
<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Rick">
<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Tom">
</FORM>



(If you're wondering why I shoved the top input over 4 spaces, the reason is simple... neat code. The neater and more organized you write your code, the easier it is to work with. Also, when you go back to make changes, having an orderly layout is half the battle.)

Now label each button. 

<FORM>
    <INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Ed">Ed Holleran
<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Rick">Rick Weinberg
<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Tom">Tom Studd
</FORM>

Ed Holleran
Rick Weinberg
Tom Studd

You can, of course, modify these labels with html tags if you wish.

Essentially your Radio Buttons are done. You can tidy things up by adding a statement above the buttons, and if you want, choose a default selection (optional). 

<FORM>
Who is your best friend?
<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Ed" CHECKED>Ed Holleran
<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Rick">Rick Weinberg
<BR><INPUT TYPE="radio" NAME="BEST FRIEND" VALUE="Tom">Tom Studd
</FORM>

Who is your best friend?
Ed Holleran
Rick Weinberg
Tom Studd

The user of course can only choose 1 option. Their choice will be returned to you as the name/value pair BEST FRIEND=Ed (or whoever they pick).

<< BACK         NEXT >>