HTML Radio Button

This page contains code for creating an HTML radio button. It also provides an explanation of radio buttons. Feel free to copy and paste the code into your own website or blog.

You create a radio button with the HTML <input> tag. You add type="radio" to specify that it's a radio button. This is because the <input> tag does more than create radio buttons. It also allows you to make text input controls, submit buttons, checkboxes, and more.

Anyway, here is the code and some information on creating a radio button.

Basic Radio Button

This example uses the <input> tag to create a basic radio button. Within the code, we use type="radio" to set the control to a radio button.

Example:

Code:

You will notice that, although all radio buttons had different values (i.e. within the value attribute) all radio buttons shared the same name (within the name attribute). I'll explain how this works shortly. In the meantime, let's look at multiple groups of radio buttons.

Groups of Radio Buttons

Here are two groups of radio buttons. Notice once again that the radio buttons in each group shares the name. The first group has a name of "preferred_color" and the second group has a name of "preferred_item".

Example:

Code:

Important points to note about radio buttons:

• All radio buttons within a group must share the same name. That is, the value of the name attribute should be the same. For example, all three radio buttons in the "Preferred Color" group have name="preferred_color".
• All radio buttons within a group should have a different value for the value attribute. For example, if one radio button has value="red", none of the others in that group should have a value of red, as this would defeat the purpose of having the extra radio button.
• The "label" for each radio button is determined by the text next to the radio button (not the value attribute). The value attribute is used by the form handler.

Understanding Radio Buttons

When you first learn how to create a radio button, you may find it a little difficult to understand how the name and value attributes work. This is probably because radio buttons are a little different to most form elements. I'll explain.

The whole purpose of a radio button is to enable the user to make one selection - and one only - from a list. If you wanted the user to make multiple selections, you wouldn't use a radio button - you'd use a checkbox.

Anyway, because the user can only make one selection from our group of radio buttons, all radio buttons in that group need to share the same name. This is how we group the list together - they all share the same name. This tells the form handler the name of the group, and the value of the selected radio button.

For example, if you want users to choose between a group of colors, you would create a radio button for each color. You would give all radio buttons the same name (for example, "preferred_color"), but you would give each radio button a different value (for example, "red").

So, let's say a user submits a form that sends an email to the webmaster. The user selects their preferred color from a radio button and clicks the submit button. The webmaster might receive an email that looks like this:

I'm sure you could think of better things to do than to simply ask for your users' favorite color, but hopefully you get the idea! In this case, the form handler (i.e. a server-side script), has processed the form and emailed the name of the group (Preferred_color), and the value that was selected (Red).