Welcome to Bucaro TecHelp!

Bucaro TecHelp
Maintain Your Computer and Use it More Effectively
to Design a Web Site and Make Money on the Web

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Victims of Sandy Hook

Stop the Slaughter of Innocents. Congress is bought and paid for by gun lunatics and gun promotion groups. If you want to live in a safe America, help buy Congress back for America. Send a donation to Mayors Against Illegal Guns, 909 Third Avenue, 15th Floor New York, NY 10022

HTML Radio Button Basics

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>

RSS Feed RSS Feed


Follow Stephen Bucaro Follow @Stephen Bucaro


Web Design Sections

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2016 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268