Radio Buttons

Radio buttons are the selfish cousins to check boxes. If you have a selection of answers or options but only one of the options can be selected at a time, then you should use radio buttons. Once again, radio buttons are created using the <input> element setting the type attribute to Radio.

<input name="Question1" type="radio" value="Porto">

Radio buttons, like check boxes, have a checked attribute in HTML, which again takes no value. If you supply this attribute in the control, the check box is checked by default:

<input name="Question1" type="radio" checked>

If you supply no value for the value attribute, it is set to "on" by default.

Contrary to check boxes, to connect a set of radio buttons, you must supply each radio button in your group with the same name. For example:

<input name="Question1" type="radio" value="Porto">
<input name="Question1" type="radio" value="Lisbon">
<input name="Question1" type="radio" value="Madrid">

This method tells the Web server that all of these buttons are connected. If you give each radio button control a different name, the user can select each option independently, just like a check box.

Try it Out: Use Radio Buttons

Start Example:
  1. Open your Web page editor and type in the following code:

    <html>
    <head><title></title></head>
    <body>
    <form method="GET" action="radio.php">
    What is the capital of Portugal?
    <br>
    <br>
    <input name= "Question1" type="radio" value="Porto">
    Porto
    <br>
    <input name="Question1" type="radio" value="Lisbon">
    Lisbon
    <br>
    <input name="Question1" type="radio" value="Madrid">
    Madrid
    <br>
    <br>
    <input type="submit" value="Submit"> </form>
    </body>
    </html>
    
  2. Save the file as radio.html, and close it.

  3. Create a new file and type in the following:

    <html>
    <head><title></title></head>
    <body>
    <?php
    echo "You selected the answer: $_GET[Question1]";
    ?>
    </body>
    </html>
    
  4. Save the file as radio.php.

  5. Open radio.html in your browser and select an answer.

  6. Click Submit and view the results of the choice you made.

How it Works

The method of transmission is changed to GET, so the query string is visible once more. A questionnaire is actually the one time when this might be useful. It confirms the answer that's selected, which would admittedly be more useful if the answer wasn't already displayed in the body of the page. That aside, take a quick look at the programs. The first program, radio.html, sets three radio button controls. They all have the same name, Question1, but with three different values to reflect the different answers:

<input name="Question1" type="radio" value="Porto">
Porto
<br>
<input name="Question1" type="radio" value="Lisbon">
Lisbon
<br>
<input name="Question1" type="radio" value="Madrid">
Madrid

Then in the second program, radio.php, you only need to display the contents of the one variable because there can only ever be one answer to the question:

<?php
echo "You selected the answer: $_GET[Question1]";
?>