Radio button

Updated: 11/13/2018 by Computer Hope
Radio button

A radio button is one type of selection indicator in a list of options. If an option is selected, the circle is filled. If the option is not selected, the circle is empty. When one circle is selected, the others are deselected, so that only one option may be selected at any time.

Radio button example

Below is an example of what the radio button looks like in your browser.

Example 1.
Example 2.
Example 3.
Example 4.
Example 5.

In our example, you'll notice you can only select one radio button option.

How to create a radio button on my HTML web page

To create a radio button on a web page, use the <input> tag as shown below. In the example below, we are using the code from the above example of a radio button that creates a radio button followed by the "Example 1" text.

<input name="example" type="radio" value="V1"> Example 1

If you want that radio button to be submitted by a web page visitor, it must be included in a <form> tag that is submitted as part of the form. When submitted, it is often sent to a Perl, PHP, or Python script that can perform various actions depending on the selected radio button.

Tip

If you are using multiple radio buttons, and you want only one to be selected at once, give them the same name attribute, but give each a unique value attribute. For example, if we used the above code and wanted to create another radio button, it would still be named "example," but be given a different value.

Note

A radio button can be made to allow the visitor to select multiple radio buttons. However, to prevent any confusion we always suggest using check boxes and not radio buttons if you want more than one option to be selected.

What is the difference between a check box and a radio button?

A check box is always a square box and allows for one or more items to be selected. A radio button is a circle and only allows for one item to be selected. If you're creating a list that needs multiple options selected, use check boxes. If you want only one option to be selected and prevent multiple options from being selected, use a radio button.

Button, Check box, Push-button, Software terms