Home > Abakada: Back to Basics > Language References > HTML Elements > INPUT type=radio Element

HTML Input 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_style_rules
   tabindex = n
   title = text
   type = radio
   value = value
>

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.

Radio group 1	Radio group 2
Option 1 Option 2	Option 1 Option 2

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.

NOTE: Only the <input> start tag must be present. The element has no end tag.

The <input_radio> element has no attribute of its own, but supports global attributes common to all HTML elements.

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