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
Basic Radio Button Example
Here's an example of HTML radio button code:
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.
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.
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
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.
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").
|Male Female Unknown|
Also see checkbox code for enabling multiple selections.