HTML Radio Button Basics by Stephen Bucaro

A radio button is a type of input element for a form. A radio button is similar to a checkbox except it's round and, when set by clicking on it with the mouse, and is displayed with a dot in its center rather than an x. Another difference between a radio button and a checkbox is that when a user clicks a radio button that is part of a group, the previously selected radio button automatically de-selects. In other words, radio buttons in a group are mutually exclusive.

Shown below is the most basic html code for a radio button.

<form id="form1">
<input type="radio" name="agree" value="yes" checked />Yes
<input type="radio" name="agree" value="no" />No
</form>

Your first question after viewing the code above should be "how do I get the user's selection out of the form?". To do that you'll need to submit your form to your web server and access its elements with a server-side language like ASP (Active Server Pages) or PHP (Personal Home Page). For that you'll need to add a Sumit button to the form, as shown below.

<form id="form1" action="http://domain.com/process_from.asp">
<input type="radio" name="agree" value="yes" checked />Yes
<input type="radio" name="agree" value="no" />No
<input type="submit" name="submit" value="Submit" />
</form>

Note that I also added an action attribute to the <form> tag. The action attribute contains the URL of the script or program on the web server that will handle the form. An example of ASP code in the server-side script to retrieve the value of the checked radio button in the group is shown below.

choice = Request("agree")

You can however access the value of the checked radio button in the group with Java Script on your webpage and use the information in the text box to make dynamic changes to your webpage. This is known as DHTML (Dynamic HTML). To access the value of the checked radio button you can call a Java Script function with the button's onclick event, passing the form to the script as shown below.

<form>
<input type="radio" name="agree" value="yes" checked />Yes
<input type="radio" name="agree" value="no" />No
<input type="button" value="Show Selection" onclick="showSelection(this.form)" />
</form>

<script type="text/javascript">

function showSelection(form)
{
  for(var i = 0; i < form.agree.length; i++)
  {
    if(form.agree[i].checked) alert("selection: " + form.agree[i].value);
  }
}

</script>

Note that the code above uses the length property of the radio button group to cycle through all the radio buttons in the group and check each ones checked property.

You can place as many radio buttons in a group as you require, as long as each has the same name attribute value as shown below.

<form>
<input type="radio" name="agree" value="yes" checked />Yes<br />
<input type="radio" name="agree" value="no" />No<br />
<input type="radio" name="agree" value="undecided" />Undecided<br />
<input type="radio" name="agree" value="don't care" />Don't Care<br />
<input type="button" value="Show Selection" onclick="showSelection(this.form)" />
</form>

<script type="text/javascript">

function showSelection(form)
{
  for(var i = 0; i < form.agree.length; i++)
  {
    if(form.agree[i].checked) alert("selection: " + form.agree[i].value);
  }
}

</script>

You can place as many radio button groups in a form as you require as long as each radio button has a name attribute value with the name of the group it belongs to, as shown below.

<form>
<input type="radio" name="agree" value="yes" checked />Yes<br />
<input type="radio" name="agree" value="no" />No<br />
<input type="radio" name="agree" value="undecided" />Undecided<br />
<input type="radio" name="agree" value="don't care" />Don't Care
<hr />
<input type="radio" name="color" value="red" checked />Red<br />
<input type="radio" name="color" value="green" />Green<br />
<input type="radio" name="color" value="blue" />Blue<br />

<input type="button" value="Show Selection" onclick="showSelection(this.form)" />
</form>

<script type="text/javascript">

function showSelection(form)
{
  var strSelection = "Selection: ";

  for(var i = 0; i < form.agree.length; i++)
  {
    if(form.agree[i].checked) strSelection += form.agree[i].value + " and ";
  }

  for(var i = 0; i < form.color.length; i++)
  {
    if(form.color[i].checked) strSelection += form.color[i].value;
  }

  alert(strSelection);
}

</script>

Note that the code above uses the length property of each radio button group to cycle through all the radio buttons in each group and check each ones checked property. It uses string concatenation to return a message with the result.

Learn more at amazon.com

More HTML Code:
• HTML5 Input Type - Email
• HTML Image Basics
• Use an Image as a Form Submit Button
• HTML Special Characters - Character Entities
• Use Meta Tags for Search Engine Optimization
• HTML5 role Attribute
• Webpage DOCTYPE Declarations Explained
• Create a Meta Tag Slide Show - No Java Script Required
• The Heading Tags
• Easy Code to Add Yahoo Site Search to Your Website