---

Radio buttons are similar to checkboxes in that they can be either on or off, but there are two key differences:

When we have a group of radio buttons that share the same name, only one of them can be selected. Once one radio button has been selected, if the user clicks another option, the new option is selected and the old one deselected.

We should not use radio buttons for a single form control where the control indicates on or off, because once a lone radio button has been selected it cannot be deselected again (without writing a script to do that).

<p> <input type = "radio" name = "radPrice" id = "rad100" value = "100">Too much </p>
<p> <input type = "radio" name = "radPrice" id = "rad200" value = "200">Way too much </p>
<p> <input type = "radio" name = "radPrice" id = "rad5000"  value = "5000" checked = "checked">You’ve got to be kidding.</p>

Live Preview

Important Notes

• Only one can be checked at a time. The term radio button came from the old-style car radios. When you pushed the button for one station, all the other buttons popped out. I still have one of those radios. (I guess I have a Web-design car.)
• They have to be in a group. Radio buttons make sense only in a group context. The point of a radio button is to interact with its group.
• They all have the same name! Each radio button has its own ID (like other input elements), but they also have a name attribute. The name attribute indicates the group a radio button is in.
• You can have more than one group on a page. Just use a different name attribute for each group.
• One of them has to be selected. The group should always have one value and only one. Some browsers check the first element in a group by default, but just in case, you should select the element you want selected. Add the checked = “checked” attribute (developed by the Department of Redundancy Department) to the element you want selected when the page appears. In this example, I preselected the most expensive option, all in the name of good capitalistic suggestive selling.

The table that follows lists the attributes for an < input > element whose type attribute has a value of radio .

Attribute	Information
type	It indicate that you want a radio button form control.
name	The name of the form control.
value	Used to indicate the value that will be sent to the server if this option is selected.
checked	Indicates that this option should be selected by default when the page loads. Remember that there is no point using this with a single radio button as a user can ’ t deselect the option. If you use this attribute, the value should also be checked in order for the attribute to be XHTML - compliant.
size	This attribute indicates the size of the radio button in pixels, but this attribute does not work in IE8 or Firefox 3.

Another Example

<p> <input type = "radio" name = "gender" id = "male" value = "male">Male </p>
<p> <input type = "radio" name = "gender" id = "Female" value = "Female">Female</p>
<p> <input type = "radio" name = "gender" id = "Others"  value = "Others" checked = "checked">Others</p>

Live Preview

---