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. Start with one.

<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>

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

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>

Each of the Radio Buttons must be assigned a different 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>

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>

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'd like, choose a default selection by adding checked. (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>

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)

Think of all the radio buttons named "best friend" in your form as one collective unit. You could have 100 radio buttons, and as long as they are all named "best friend" and all in the same form, your visitor can only choose one and it will return one name/value pair.

Let's suppose you had a set of radio buttons named "best friend", and in that same form, you had another set named "worst friend"...

<form>
Who is your best friend?<br>
<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<br>
<br>
Who is your worst friend?<br>
<input type="radio" name="worst friend" value="Hugh">Hugh Jass<br>
<input type="radio" name="worst friend" value="Robin">Robin Banks<br>
<input type="radio" name="worst friend" value="Anita">Anita Bath
</form>

If your visitor chose Ed and Anita, then you would be sent the following name/value pairs...

best friend=Ed
worst friend=Anita

See... it's not all that difficult. If you're with me so far you're doing just fine.

Form Tutor

Lessons: Intro 1 2 3 4 5 6 7 8 9 10 11 12 13      Quick Forms Reference

HTML 4.0 Reference      Barebones HTML Guide