Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

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>