Radio Buttons

Radio buttons are used when you want the user to choose only one of a small group of options.

Radio buttons are created using the <INPUT> tag. When used to create checkboxes, the INPUT tag has three required attributes, TYPE, NAME, and VALUE, and two optional attribute, ID and CHECKED.

Sample HTML source for a radio button:

<input type="radio" name="title" value="Ms" checked="checked">

See the table below for more examples of radio buttons

The TYPE Attribute (required)

The TYPE attribute takes the value "radio" when used to create a radio button.

The NAME Attribute (required)

The author of the form assigns a value to the NAME attribute. Use the same name for all of the radio buttons in each group, this way the user is limited to exactly one option in the group.

The VALUE Attribute (required)

Use the VALUE attribute to distinguish between the different radio buttons in a group.

The ID Attribute (optional, but required by accessibility standards)

The ID attribute is used to explicitly associate the specific Input tag with a specific LABEL tag. ID attributes are unique within a page.

The CHECKED Attribute (optional)

The CHECKED attribute indicates which radio button should be selected when the page is first loaded. Only one radio button in each group may be CHECKED. The CHECKED attribute does not take a value.

Example	HTML Source	Description
Mr. Mrs. Miss Ms. Dr.	<label for="mr"> <input type="radio" checked="checked" name="title" value="Mr" id="mr" /> Mr.</label><br /> <label for="mrs"> <input type="radio" name="title" value="Mrs" id="mrs" /> Mrs.</label>br /> <label for="miss"> <input type="radio" name="title" value="Miss" id="miss" /> Miss</label>br /> <label for="ms"> <input type="radio" name="title" value="Ms" id="ms" /> Ms.</label>br /> <label for="dr"> <input type="radio" name="title" value="Dr" id="dr" /> Dr.</label>br />	Radio buttons are usually used when exactly one option from a list is required. Use radio buttons which have the same NAME with a different VALUE for each button. Once one radio button in a set is selected, it is possible to select a different button from the same set, but it is impossible to completely de-select all radio buttons in the set. If users must be able to de-select all options, use checkboxes instead.