type=radio

FilterElements

HTML: <input type="radio">
XHTML: <input type="radio"/>  or  <input type="radio" />

Creates a radio button that can be turned on and off. When a number of radio buttons share the same control name, only one button within the group can be “on” at one time, and all the others are “off.” This makes them different from checkboxes, which allow multiple choices to be selected within a group. Only data from the “on” radio button is sent when the form is submitted.

Start/End Tags

This is an empty element. In HTML, the end tag is forbidden. In XHTML, the element must be closed with a trailing slash as just shown. Developers may include a space character before the slash for backward compatibility with older browsers.

Specifications

  • HTML 4.01
  • HTML5

autofocus

Values: None in HTML. (autofocus="autofocus" in XHTML)
HTML5 only. Indicates the control should have focus (be highlighted and ready for user input) when the document loads.

checked

Values: None in HTML. (checked="checked" in XHTML)
When this attribute is added to a radio button or checkbox input, the input will be checked when the page loads.

disabled

Values: None in HTML. (disabled="disabled" in XHTML)
Disables the control for user input. It can be altered only via a script. Browsers may display disabled controls differently (grayed out, for example), which could be useful for dimming certain controls until required info is supplied.

form=

Values: id of the form owner
HTML5 only. Explicitly associates the input control with its associated form (its form owner). With this method, the input control does not need to be a child of the applicable form element.

name=

Values: text
Required. Assigns a name to the control; a script program uses this name to reference the control.

readonly

Values: None in HTML. (readonly="readonly" in XHTML)
Indicates that the form input may not be modified by the user.

required

Values: None in HTML. (required="required" in XHTML)
HTML5 only. When present, indicates the input value is required.

value=

Values: text
Required. Specifies the initial value for this control.

HTML 4.01 <input> Events

onchange
Occurs when the element loses the input focus and its value has been modified since gaining focus
<p>Which of the following operating systems do you like
best?</p>
<ul>
<li><input type="radio" name="os" value="Win">Windows</li>
<li><input type="radio" name="os" value="Linux">Linux</li>
<li><input type="radio" name="os" value="OSX" checked>
Macintosh OSX</li>
<li><input type="radio" name="os" value="DOS">DOS</li>
</ul>

Rendered Example

Which of the following operating systems do you like best?

  • Windows
  • Linux
  • Macintosh OSX
  • DOS