HTML Radio Button Code

This page contains HTML radio button code. You can copy/paste this code into your own blog or website in order to create radio buttons.

A radio button is a form element that allows the user to select one option from a range of options.

Radio buttons are created with the HTML <input> tag. Radio buttons can be nested inside a <form> element or they can stand alone. They can also be associated with a form via the form attribute of the <input> tag.

Basic Radio Button Example

Here's an example of HTML radio button code:

Source Code	Result
<input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female	Male Female

Working Example

Here, we add a submit button so that the checkboxes can become useful. We also place the checkboxes within a <form> element that specifies a page to process the form.

Source Code	Result
<form action="/html-codes/forms/html-form-tag-action.cfm" target="_blank" method="get"> <p>What is your gender?</p> <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female <p><input type="submit" value="Submit"></p> </form>	What is your gender? Male Female

Radio Buttons vs Checkboxes

It's important to understand the difference between radio buttons and checkboxes. Checkboxes differ from radio buttons, in that, checkboxes allow the user to select any number of options, whereas radio buttons allow the user to select one option only.

So radio buttons are better suited when you only want the user to select one option (eg, Male/Female, Yes/No, etc).

In the example below, try selecting more than one radio button. You'll notice that every time you select another radio button, the previous selection is de-selected. Radio buttons are designed to do this. This helps you enforce users to only select one option. There is no way for them to select multiple options (whether accidentally or intentionally)

Next, try selecting more than one checkbox. You'll see that you can select as many (or few) checkboxes as you wish. This is also by design, as it allows you to provide the user with the ability to select multiple options.

Source Code	Result
<form action="/html-codes/forms/html-form-tag-action.cfm" target="_blank" method="get"> <h3>Radio Buttons</h3> <p>What is your gender?</p> <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female <input type="radio" name="gender" value="unknown"> Unknown <h3>Checkboxes</h3> <p>What would you like for lunch?</p> <input type="checkbox" name="fruit" value="apple"> Apple <input type="checkbox" name="fruit" value="orange"> Orange <input type="checkbox" name="fruit" value="banana"> Banana <p><input type="submit" value="Submit"></p> </form>	Radio Buttons What is your gender? Male Female Unknown Checkboxes What would you like for lunch? Apple Orange Banana

Source Code

Result

<form action="/html-codes/forms/html-form-tag-action.cfm" target="_blank" method="get">
<h3>Radio Buttons</h3>
<p>What is your gender?</p>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="unknown"> Unknown	
<h3>Checkboxes</h3>
<p>What would you like for lunch?</p>
<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="orange"> Orange 
<input type="checkbox" name="fruit" value="banana"> Banana 
<p><input type="submit" value="Submit"></p>
</form>

The `form` Attribute

In the above example, we enclosed the radio buttons inside a form. HTML5 also allows you to specify a form using the form attribute. This method could be used in the event that the radio buttons are not inside the form that needs to submit its contents.

In the next example, add id="myForm" to the form. We then add form="myForm" to the radio buttons (via the <input> tags) and move the radio buttons outside of the form. Submitting the form should still submit the contents of the radio buttons, because they reference the id of the form in their form attributes.

Source Code	Result
<p>What would you like for lunch?</p> <input type="radio" name="gender" value="male" form="myForm"> Male <input type="radio" name="gender" value="female" form="myForm"> Female <input type="radio" name="gender" value="unknown" form="myForm"> Unknown <form action="/html-codes/forms/html-form-tag-action.cfm" target="_blank" method="get" id="myForm"> <p><input type="submit" value="Submit"></p> </form>	What would you like for lunch? Male Female Unknown

Source Code

Result

<p>What would you like for lunch?</p>
<input type="radio" name="gender" value="male" form="myForm"> Male
<input type="radio" name="gender" value="female" form="myForm"> Female
<input type="radio" name="gender" value="unknown" form="myForm"> Unknown		
<form action="/html-codes/forms/html-form-tag-action.cfm" target="_blank" method="get" id="myForm">
<p><input type="submit" value="Submit"></p>
</form>

What would you like for lunch?

Male Female Unknown

Set a Default Value

You can set a default value by using the checked attribute. When this is added to a radio button, that radio button is selected as soon as the page loads (i.e. it doesn't need the user to select it). The user can then choose to leave that button selected, or change it by selecting another radio button.

In this example, we've set the first option to the default value.

Source Code	Result
<p>Choose your free gift:</p> <input type="radio" name="gift" value="bread" checked> Loaf Of Bread <input type="radio" name="gift" value="money"> $1000 Cold Hard Cash <input type="radio" name="gift" value="computer"> Computer	Choose your free gift: Loaf Of Bread $1000 Cold Hard Cash Computer

Disabling a Radio Button

You can disable a radio button by using the disabled attribute. You could use this in conjunction with a script to enable/disable the checkbox depending on whether certain criteria has been met.

In this example, we've disabled the third option ("Unknown").

Source Code	Result
<input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female <input type="radio" name="gender" value="unknown" disabled> Unknown	Male Female Unknown

Also see checkbox code for enabling multiple selections.