HTML Syntax

<input type = radio 
   checked
   id = control_id
   name = control_name
   value = control_value
>

NOTE: Only the <input> start tag must be present. The element has no end tag.

The <input type=radio> element renders a control button representing an option that the user can switch on or off.

The appearance of the radiobutton interface varies, depending on the browser and operating system. Typically, it is presented as a small circle.

In most cases, radio buttons are used with other <input> elements defined within an HTML <form> element.

When radiobutton controls are to be submitted in a form, the name and value attributes are required.

This is because the control’s name/value pair is needed in order to process the submitted data.

A single radiobutton allows users to select a single value to be submitted for processing.

Multiple radio buttons may allow one or more, or all values to be submitted for processing.

The assigned value can be any string that represents the subject or textual content of the radiobutton.

The default value is the keyword on when no value is specified.

The control is selected or checked when a user clicks or taps the radiobutton ( or its associated label when one is specified ), or when the control element’s checked attribute is set thru script.

When a form is submitted, only the name/value pairs of checked radiobutton controls are sent with the form data set.

Several radio buttons in a form may share the same control name.

This way, the controls act as a group, and the behavior is different. When one is switched on, all others with the same name are switched off.

Only one radio button in each group may be selected at any given time. Only the selected radio button in the group generates a name/value pair in the submitted data.

One really useful feature introduced in HTML4 is the <label> element, which serves to associate or connect form labels to form controls to make them more accessible and easier to activate, especially on small-screen mobile devices with touchscreen functionality only ( no stylus, pen or any pointing device ).

Notice in the above examples that you can toggle a radiobutton by clicking ( or tapping ) on its associated <label> as well as on the radiobutton itself.

Without an associated <label> element, the user has to click ( or tap ) only on the radiobutton itself to select ( or deselect ) an option.

Notice also the cursor change when hovering over a <label> that is ( or is not ) connected to a control.

When radiobutton controls ( or any input control ) are to be associated with a <label> element, the control’s id attribute is required, as this is what the for attribute of the <label> uses to connect to the control.

<label for=control_id>control_label</label>

The following example shows the simplest way to test the checked state of a single radiobutton in client-side script, and trigger an action if the test returns true.

radio = document.getElementById ( "radio" );
if ( radio.checked ) msg.innerHTML = msgText;
else msg.innerHTML = "";

In this case, the action is simply to display a message if checked is true, and discard the message otherwise.

 Show me 

The following example shows how to retrieve selected values of multiple radiobuttones in client-side script, and enumerate the values in a message.

function getChoices ( ) {
   msg.innerHTML = "";
   form = document.querySelector ( "#theForm" );
   selected = Array.from ( form.querySelectorAll ( 
      'input[type="radio"]:checked' ) );
   if ( selected.length > 0 ) {
      msg.innerHTML = "Selected items:<br>"
      // enumerate selected values
      for ( var i = 0; i < selected.length; i ++ ) {
         msg.innerHTML += selected [ i ].value + "<br>";
      }
   }
   else msg.innerHTML = "Nothing selected."
}

Recall that when a form is submitted, only the name/value pairs of checked radiobutton controls are sent with the form data set.

 Show me 

This example demonstrates the effect of grouping radiobution controls to provide a user with a series of choices. The sample includes client-side script that detects which radio button is selected.

 Show me 

Notice that by setting the name attributes the same, the controls act as a collection wherein only one radio button in the group may be selected at any given time.

INPUT   INPUT type=checkbox   OPTION   SELECT