Radio buttons are used for HTML5 and CSS3 web pages when you want to let the user pick only one option from a group. You can see an example of a radio button group in action.
Radio buttons might seem similar to check boxes, but they have some important differences:
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.
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 attribute. The attribute indicates the group a radio button is in.
You can have more than one group on a page. Just use a different 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 attribute to the element you want selected when the page appears. In this example, the most expensive option was preselected, all in the name of suggestive selling.
Here's some code that explains it all:
<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<title>radioButtons.html</title>
</head>
<body>
<form action = ">
<fieldset>
<legend>How much do you want to spend?</legend>
<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>
</fieldset>
</form>
</body>
</html>