Radiobuttons

Radio buttons should be used whenever you want to give your user a selection between two or more options. They look a lot like checkboxes, but instead of allowing zero or several selections within a group of options, a radio button force you to select just one. In its most simple form, a radio button is simply an input element with the type property set to radio, like this:

<input type="radio">

However, as with all input elements, you need to define a name for it to be usable - without a name, the element won't be identifiable when posting the form back to a server for processing. You also want to set a value - this will be the value sent to the server if the radio button has been selected. Here's an example:

<input type="radio" name="nameOfChoice" value="1">

So, now we have fully-functional radio button, which can be posted back to the server. However, if you try the example, you will notice that a single radio button doesn't really make sense. This is due to the nature of the radio button, which always offers you to decide between two or more options - if you only have one option (on or off), then you should use a checkbox.

With that in mind, allow me to show you a much more complete example, where we have several radio buttons, which offers you to select your favorite pet:

<form method="post" action="/Tests/Post">
    <fieldset>
        <legend>What is Your Favorite Pet?</legend>
        <input type="radio" name="favorite_pet" value="Cats">Cats<br>
        <input type="radio" name="favorite_pet" value="Dogs">Dogs<br>
        <input type="radio" name="favorite_pet" value="Birds">Birds<br>
        <br>
        <input type="submit" value="Submit now">
    </fieldset>
</form>

Notice how all three radio buttons share the same value in the name property - this is very important because it ties the radio buttons together in the same group. Since there can be only one selection in a group of radio buttons, this means that when you select one of the radio buttons, any other checked radio button will become unchecked. The value property, on the other hand, should usually be unique, because this is the value used to represent the choice of the user for this group of options.

Checked or not checked?

If you check out the previous examples, you will notice that none of the radio buttons are checked by default. For checkboxes, this might make sense, but with radio buttons you usually want to force the user to select one of the options. This can of course be done with validation, but it's a lot simpler to just pre-check one of the options. This is very simple - just use the checked property:

<input type="radio" name="favorite_pet" value="Cats" checked>Cats<br>
<input type="radio" name="favorite_pet" value="Dogs">Dogs<br>
<input type="radio" name="favorite_pet" value="Birds">Birds<br>

Notice how I have added the word "checked" to the first radio button - now this will be checked from the start, allowing the user to change the selection but basically making it impossible to NOT select any of the options. For the record, in the old days of XHTML, where each attribute should always have a value (even the boolean attributes), it would look like this:

<input type="radio" name="favorite_pet" value="Cats" checked="checked">Cats<br>

Either way should work in all modern browsers, but the first way is shorter and more "HTML5-like".

Labels for radio buttons

If you tested the previous example, you will notice that we can put text next to a radio button, but they are still two separate things - you can't click the text to trigger the radio button. This can be really annoying for the user, but fortunately for us, it's easy to solve: Just use the label element! Here's a basic example to show you the difference:

<input type="radio" name="favorite_pet" value="Cats" checked>Cats<br>
<input type="radio" name="favorite_pet" value="Dogs" id="dogs">
<label for="dogs">Dogs</label>

Two radio buttons - one without a label and one with. They might look almost identical, but the one with the label can be triggered by clicking both the actual radio button AND the attached label. This is nice if you're sitting on a desktop PC with a mouse, but even better when you're using a touch device like a smartphone, where small radio buttons or checkboxes can be hard to hit with your finger.

The label is very simple - it uses the for attribute to attach itself to a form element with a matching id attribute (notice how I have "dogs" in both places).

Working dynamically with radio buttons

Just like any other DOM element, you are able to manipulate radio buttons using JavaScript. To show you how it works, I have created a small example, where we use JavaScript to check which option have been selected and then ask the user for confirmation about it before submitting the form:

<form method="post" action="/Tests/Post" onsubmit="return ValidateForm();">
    <fieldset>
    <legend>What is Your Favorite Pet?</legend>
    <input type="radio" name="favorite_pet" value="Cats" checked>Cats<br>
    <input type="radio" name="favorite_pet" value="Dogs">Dogs<br>
    <input type="radio" name="favorite_pet" value="Birds">Birds<br>
        <br>
    <input type="submit" value="Submit now">
    </fieldset>
</form>

<script type="text/javascript">
function ValidateForm()
{
    var radioButtons = document.getElementsByName("favorite_pet");
    for(var i = 0; i < radioButtons.length; i++)
    {
        if(radioButtons[i].checked == true)
        {
            if(confirm("You have selected " + radioButtons[i].value + " as your favorite pet. Is that correct?"))
                return true;
            else
                return false;
        }
    }
}
</script>

The form is pretty much the same as it was in the previous example, but notice how I have added an event handler for the onsubmit event of the form. It references a JavaScript function which I have defined in the lower part of the example - a simple function which loops through all the pet-selection radio buttons and as soon as it hits one where the checked property is true, it asks the user for confirmation. We return true or false, depending on whether we get the confirmation from the user or not, which decides whether the form is allowed to submit or not.

This was just a simple example of how to work with radio buttons using JavaScript. You can do much more, especially if you use a JavaScript framework like jQuery, which will make it a lot easier to select and manipulate DOM elements.

Summary

Radio buttons allow you to set up a list of options, from which the user can pick just one. You should use labels to tie your radio button and the descriptive text together, to allow the user to click a larger area when manipulating the radio button - this is also good for assisting technologies like screen readers for visually impaired.