'Eye' Focus: Web Support Tutorials

'Eye' Focus Home

Ancestral Soldiers of Honor (ASH)

Photo Albums

My Yahoo! Comics

Windows XP Essentials

Forms: RADIO Buttons

Radio buttons allow the user to choose only one of a number of options. When you choose one option, any previously selected option is unselected. Like check boxes, you can define a radio button to be checked by default, but unlike check boxes you should only have one radio button in a group initially checked. Radio buttons are grouped together by assigning them all the same NAME however they need to have different VALUEs). Here is an example of a multiple choice question using radio buttons:

Example:

Which one of these edibles is not a fruit? Apple   Fig Orange   Pineapple Tomato   Banana

Here is the HTML source for how this example might work. (skip code)

<form action="..." method="post"> <p>Which one of these edibles is not a fruit?<br> <label for="fruit1"><input id="fruit1" name="fruit" type="radio" value="apple">Apple</label> &nbsp; <label for="fruit2"><input id="fruit2" name="fruit" type="radio" value="fig">Fig</label><br> <label for="fruit3"><input id="fruit3" name="fruit" type="radio" value="orange">Orange</label> &nbsp; <label for="fruit4"><input id="fruit4" name="fruit" type="radio" value="pineapple">Pineapple</label><br> <label for="fruit5"><input id="fruit5" name="fruit" type="radio" value="tomato" checked>Tomato</label> &nbsp; <label for="fruit6"><input id="fruit6" name="fruit" type="radio" value="banana">Banana</label></p> <input type="submit" value="Not Fruit"> <input type="reset" value="Don't Care"> </form><p>

Notice that the INPUT code is almost the same as the code for the check box example. The only difference is that instead of being able to have a different variable associated with every check box, all the radio buttons NAME in a group must be identical.

Definitions

TYPE:

The input TYPE of RADIO is used when multiple choices are offered but only one is possible for a group.

ID:

The ID provides for the LABEL association, making the RADIO button and related text properly associated with one another. The labeled text should now properly allow the radio button to be selected, without having to select the button itself. (Note: Observe the numbering used with like names. Labels and ID's must be uniquely identified on a page.)

NAME:

NAME specifies the name of the variable where the returned value will be stored.

VALUE:

VALUE can be anything you choose. If VALUE is not specified the items generally assume a numerically sequential value, starting with zero for the first item of the group.