Forms - Radio Buttons

Section 1 - Introduction
Section 2 - Basics
Section 3 - Next Level
Section 4 - Advanced
      Forms
         How forms are sent
         Input field
         Buttons
         Input types
         Fieldset
         For more help...
         You try it
      Advanced Tables
      Frames
      Style Sheets
      Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices

Radio Buttons:
This tag is very similar to the checkbox tag with one very important difference; only one radio button can be "on" at a time. This forces the user make decisions on your form. The radio button is a tiny bit more complicated. Here's the basic tag:

Please note that radio buttons have both a name and a value. The name is the category it belongs to and the value is specific to that button. It's much easier to see this on a longer list of radio buttons. This might help:

Code

<form method="POST" action="mailto:myaddress@mail.com">
What kind of animal makes the best companion?
<br>
<input type="radio" name="cat"> Cat <br>
<input type="radio" name="pet" value="dog"> Dog<br>
<input type="radio" name="pet" value="bird"> Bird<br>
<input type="radio" name="pet" value="fish"> Fish<br>
<input type="radio" name="pet" value="other" > Other<br>
<input type="submit" value="Talk to me"> <br>
<INPUT TYPE=RESET value="Clear it">
</form>

What you see
What type of animal makes the best companion? Cat Dog Bird Fish Other

Notice that all of these radio buttons are named "pet." This puts all of them in the same group and ensures that only one can be selected at a time. If you leave out the name, or you use different names, you can click as many of the buttons as you'd like.

Like the checkboxes, you can pre-select one of the options if you'd like. This is done the same way that it is done with the boxes.

Code

<form method="POST" action="mailto:myaddress@mail.com">
What kind of animal makes the best companion?
<br>
<input type="radio" name="cat"> Cat <br>
<input type="radio" name="pet" value="dog"> Dog<br>
<input type="radio" name="pet" value="bird"> Bird<br>
<input type="radio" name="pet" value="fish" CHECKED> Fish<br>
<input type="radio" name="pet" value="other" > Other<br>
<input type="submit" value="Talk to me"> <br>
<INPUT TYPE=RESET value="Clear it">
</form>

What you see
What type of animal makes the best companion? Cat Dog Bird Fish Other

Done. You've learned radio buttons. Passwords? NEXT!