input type="radio" Element

Module

The input type="radio" element is an inline element declared by the XHTML 1.1 Forms Module

Elements in the Forms Module are:
form | label | textarea | select | optgroup | option | button | fieldset | legend |
input type="button" | input type="checkbox" | input type="file" | input type="hidden" | input type="image" | input type="password" | input type="radio" | input type="reset" | input type="submit" | input type="text"

Description

A set of input type="radio" elements may be used within a form to create a set of radio buttons, where the user may select one and only one choice from a number of options.

All radio buttons with the same name attribute value are part of the same set. One (and only one) of each set of radio buttons should be given the checked attribute to specify that this button is the one to be initially selected (or "on") within the set.

<label for="small">Small:</label>
<input type="radio" name="size" id="small" value="1" />
<label for="medium">Medium:</label>
<input type="radio" name="size" id="medium" value="2" checked="checked" />
<label for="large">Large:</label>
<input type="radio" name="size" id="large" value="3" />

The value attribute specifies the value to be sent in the name=value pair to the processing URI if this radio button is "on" when the form is submitted. For example, if the form containing the example radio buttons above were submitted with the last button (for "Large") selected, the pair submitted to the processing URI would be size=3.

Note: Although the value attribute is technically optional - and most browsers will make up a value to send (usually "on") if required - you should always specify a value for your radio buttons. This is based on a note in the W3C HTML 4.01 specifications (*HTML 4.01 value attribute of the input element) which says that the value attribute is optional on input elements except when the type attribute has the value "radio" or "checkbox". In any case, allocating a different value to each radio button in a set provides the mechanism for the processor to tell them apart!

A set of radio buttons, each with the same value for its name attribute, is logically equivalent to a select list without the multiple attribute specified.

<div><fieldset>
<legend>Colour:</legend>
<label for="black">Black:</label>
<input type="radio" name="colour" id="black" value="1" />
<label for="red">Red:</label>
<input type="radio" name="colour" id="red" value="2" checked="checked" />
<label for="blue">Blue:</label>
<input type="radio" name="colour" id="blue" value="3" />
</fieldset></div>

<div>
<label for="colour">Colour:</label>
<select id="colour" name="colour">
  <option value="1">Black</option>
  <option value="2" selected="selected">Red</option>
  <option value="3">Blue</option>
</select>
</div>

As shown above, a semantically-significant method to add an overall label to a set of radio buttons, stating their combined purpose, is to use enclose the set within a fieldset element and label it using a legend element. (Appearance, including removal of any border, can be controlled using CSS.) The label element itself serves this purpose for the select list.

See also: input type="checkbox".

#REQUIRED Attributes

Although the type attribute is not #REQUIRED on the input element, its default value is "text" and so must be present on input type="radio".

Specific Attributes

From the Forms Module - the Element's own Module

accesskey [ type Character ]

Key to be pressed which allows the radio button to be turned "on" directly from the keyboard

checked [ type Boolean ]

If this attribute is present, the radio button is initially "on", otherwise it is not (this is its initial value - to which it is returned if the form is reset). One and only one radio button in each set should be designated as "checked".

disabled [ type Boolean ]

If this attribute is present, the radio button is initially disabled - no data is sent to the processing URI for disabled elements when the form is submitted. The user cannot interact with a disabled control.

name [ type CDATA ]

This is the name sent to the processing URI for this radio button if it is "on" when the form is submitted (if the name attribute is not present, no data will be sent for this element - a set of radio buttons, from which one and only one may be "on", share the same name). The value sent (in a name=value pair) is that of the value attribute of this element - but data is sent only for those radio buttons which are "on" at the time of submission.

Note: Although technically optional, a note in the *Forms Module DTD says that the name attribute is required on all input elements except "submit" and "reset"

tabindex [ type Number ]

An integer between 0 and 32767 specifying the position of the radio button in the tabbing order of the document

value [ type CDATA ]

The value to be sent in the name=value pair to the processing URI if this radio button is "on" when the form is submitted.

Note: Although this attribute is optional, and most browsers will make up a value to send (usually "on") if required, you should always specify a value attribute for your radio buttons (ref: *HTML 4.01 value attribute of the input element).

From the Intrinsic Events Module

onblur [ type Script ]

Script to be executed when the element loses focus

onchange [ type Script ]

Script to be executed when the radio button is selected (after being initially unselected)

onfocus [ type Script ]

Script to be executed when the element receives focus

Common Attributes

From the Core Attribute Collection

class [ type NMTOKENS ]

One or more space separated classes

id [ type ID ]

A unique identifier for the element

style [ type CDATA ], from the Style Attribute Module (deprecated)

Element-specific styles

title [ type Text ]

Descriptive title for the element (in some user agents this may appear as a "tooltip" when the mouse hovers over the element)

xmlns [ type URI - #FIXED 'http://www.w3.org/1999/xhtml' ]

XML namespace

From the I18N Attribute Collection

dir [ type Enumeration (ltr | rtl) ], from the Bi-directional Text Module

Left-to-right or right-to-left directionality

xml:lang [ type LanguageCode ]

A language code for the element

From the Events Attribute Collection

All attributes in the Events Attribute Collection are supported:
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Content Model

EMPTY

See Content Model & Nesting for information about Content Model syntax and Nesting Groups.

Valid children of input type="radio"

This element is empty and may have no children.

Valid parents of input type="radio"

• From the Text Module: abbr, acronym, address, cite, code, dfn, div, em, h1 - h6, kbd, p, q, samp, span, strong, var
• From the Hypertext Module: a
• From the List Module: dd, dt, li
• From the Tables Module: caption, td, th
• From the Forms Module: fieldset, label, legend
• From the Presentation Module: b, big, i, small, sub, sup, tt
• From the Edit Module: del, ins
• From the Bi-directional Text Module: bdo
• From the Object Module: object
• From the Ruby Annotation Module: rb, rt