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:

CodeResult

Red
Blue
Green

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:

CodeResult

Preferred Color:

Red
Blue
Green

Preferred Item:

Car (The latest Aston Martin!)
House (Waterfront Mansion)
Coffee Machine (umm...but it's a really good one...)

Important points to note about radio buttons:

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:

A user has selected a preferred color from your web form. Here is the result:

Preferred_color: Red

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).

Enjoy this page?