Radio Buttons
A radio button set enables the user to choose one option within a group.
Basics
Bare-bones code for a radio button set is:
<INPUT TYPE="radio" NAME="a" VALUE="a"> <INPUT TYPE="radio" NAME="a" VALUE="b"> <INPUT TYPE="radio" NAME="a" VALUE="c">
Radio buttons should always be implemented in groups (there's no point in having a single radio button). The NAME groups a set of radio buttons together, and the VALUE represents the value of each individual button in the set.
The code renders only the buttons, not any label for the user.
Usage
A set of radio buttons enables the user to select one option in a group. Upon making a choice, other radio buttons are deselected. If the user should be permitted to select one or more, use a bank of checkboxes instead.
Processing
When one of the radio buttons is selected, the browser will pass a name=value pair to the server indicating the VALUE of the radio button selected.
If the user has not made a selection at all, and there was no default item, the browser may pass a null value, or will not pass a name=value pair at all.
HTML Attributes
The checkbox usually has only a name and value, but other attributes are available:
- CHECKED - Indicates this radio button should render as selected by default.
- ACCESSKEY - A shortcut key to put focus on the element.
- DISABLED - Grays out the element and prevents the user from altering its value.
- TABINDEX - Specified as a number, this alters the default tabbing order of a form.
JavaScript
Properties
- checked - Indicates whether the button is currently checked.
- defaultChecked - Indicates whether the button is checked by default.
Methods
- click() - Simulates a user click on the button in its current state.
Event Handlers
- onclick - Takes effect when the element is clicked
Misc Notes
If you do not specify that one of the radio buttons should be checked by default, most current Web browsers will not pass any value to the server ... but some older software will force the first button to be selected by default. So keep an eye on your user-agent stats and test accordingly before relying on assumptions.
Whether to use radio buttons or a selector will depend on the specific nature of the data you're looking to collect. The advantage to radio buttons is that you can provide more text (or even images) in association with each option, and the user can see a list of all options at a glance - but again, whether this is valuable depends on the specific situation.