Radio button in HTML 4 and 5

A list of options can be represented in a form with radio buttons, a group of round checkboxes.
There is no difference between versions 4 and 5 of HTML for this form object.

To create a radio group, you have just to assigned the same value to the name attribute of all radio button which are part of the group.
The checked attribute has the "true" state when the checkbox is thicked or when it is the keyword checked is inserted in the source code.

The change event is supported by a radio button and may be used in JavaScript to know its state.

Code sample of a group "x" of button radios:

<input type="radio" name="x" value="" checked > 
<input type="radio" name="x" value="" >

How to send form data for a radio button

the content of the value attribute is passed with the form data only when the box is checked or if the tag has the checked attribute predefined and the state is not changed by the user.

When the user checks on another checkbox, the checked attribute is dynamically assigned to the other checkbox.

Example of a radio group included in a form along a submit button:

<form name="form1" method="post" action="script.php">
  <input type="radio" name="x" value="one" checked > 
  <input type="radio" name="x" value="two" >
  <input type="submit" value="Send">
</form>

The browser will retrieve and transmit data automatically when you click on the submit button.

How to retrieve the state of a radio button in form data

A value is assigned to the attribute value in the form such as it is associated to the name of radio button group in form data.

If we assign for example to the first box the value "one", this is sent:

x="one"

In a PHP script, the value will be in the $ _POST array:

$x = $_POST['x'];

$x will be assigned "one".

For retrieving the values in a HTML page without server script, it is more complicated. See how to pass data to a Web page.

How to know what radio button is checked in the page

If we want to pass the form values to a script on the server asynchronously using Ajax, it must be taken before in the page.

In the case of a group of radio buttons, the following code determine which box is checked.

HTML code

<form name="form1">
Apple <input type="radio" name="fruit" checked value="apple" >
Orange <input type="radio" name="fruit" value="orange" >
Apricot <input type="radio" name="fruit" value="apricot" >
</form>

<input type="button" onclick="whichFruit()" value="Choose a fruit">

The last line allows to use the data directly on the page, the function below will be called when you click on the button.

JavaScript code

function wichFruit()
{
  var element = document.form1.fruit;
  for (var i=0; i < element.length; i++)
  {
    if (element[i].checked)
    {
      var fruit = element[i].value;
      break;
    }
  }
}

Ajax code

To use the data to a script on the server, the button will call a function (in this case ajaxFun) to retrieve the data in the page and go to the server through Ajax.

<input type="button" onclick="ajaxFun()" value="Send">

Instead of sending the form with a submit button, click on the button calls a JavaScript, which determines which box is checked with the whichFruit() function above, then constructs a parameter for the Ajax function.

function ajaxFun()
{
  var data = "fruit=" + whichFruit();
  AAWrite("script.php", data, somefunction);
}

The AAWrite function (from the Anaa framework) executes the script on the server.

Demonstration

HTML 5 Specification. States of a radion button.