HTML Elements
| Creates a radio button control. | HTML 2, 3.2, 4, 4.01, 5 |
HTML Syntax
<input
accesskey = key
checked
class = classname
datafld = fieldname
dataformatas = html | text
datasrc = #id
dir = ltr | rtl
disabled
id = value
name = name
size = n
style = css properties
tabindex = n
title = text
type = radio
value = value
event = script
>
The INPUT type=radio element renders a control button that the user can switch on or off.
The switch is on when a user clicks the radio button, or when the control element’s checked attribute is set thru script.
Like checkboxes, several radio buttons in a form may share the same control name, but behave differently: when one is switched on, all others with the same name are switched off.
Only one radio button in each group may be selected at any given time. Only the selected radio button in the group generates a name/value pair in the submitted data. Below is the code for the above example.
<form>
<table align="center" bgcolor="khaki">
<tr>
<th>Radio group 1</th>
<th>Radio group 2</th></tr>
<tr>
<td><input type="radio" name="group1"> Option 1<br>
<input type="radio" name="group1"> Option 2</td>
<td><input type="radio" name="group2"> Option 1<br>
<input type="radio" name="group2"> Option 2</td></tr>
</table>
</form>
If no radio button in a set sharing the same control name is initially on, browser behavior for choosing which control is initially on is undefined. Thus, authors should ensure that one is initially on in each set of radio buttons.
Note that radio buttons will not function without the name property.
INPUT Members
This sample demonstrates the use of the INPUT Radio control to provide a user with a series of choices. The sample includes client-side script that detects which radio button is selected.
Show me
Notice that by setting the name attributes the same, the controls act as a collection. As a collection, only one radio button in the group may be selected at any given time.
INPUT