HTML Radio Button: Select One Option from a Group
HTML radio buttons are used when a user should choose one option from a mutually exclusive group. Radio buttons belong to the same group when they use the same name.
<fieldset>
<legend>Gender</legend>
<input type="radio" id="gender_male" name="gender" value="Male" checked>
<label for="gender_male">Male</label>
<input type="radio" id="gender_female" name="gender" value="Female">
<label for="gender_female">Female</label>
</fieldset>
name. Their value attributes identify the individual options.- Basic Radio Button Syntax
- Radio Button Attributes
- Grouping Radio Buttons with name
- value Attribute
- checked: Default Selection
- What If No Radio Button Is Selected?
- Labels, fieldset and legend
- Required Radio Group
- Disabled Radio Buttons
- Radio Button vs Checkbox
- Complete Form Example
- Receiving the Selected Value in PHP
- Video Tutorial
- Common Radio Button Mistakes
- FAQs
Basic Radio Button Syntax Top ↑
<input type="radio" name="groupname" value="value1" checked>The checked attribute is optional. If no radio button in the group starts checked, the form initially has no selected value for that group.
Radio Button Attributes Top ↑
| Attribute | Purpose |
|---|---|
type="radio" | Creates a radio button. |
name | Groups related radio buttons and defines the submitted field name. |
value | Defines the value submitted when that option is selected. |
id | Uniquely identifies the control and connects it to a label. |
checked | Makes that option selected initially. |
required | Requires a selection in the radio group for browser constraint validation. |
disabled | Disables the option and normally excludes it from form submission. |
align attribute is not the way to position radio buttons. Use CSS for spacing and layout.Grouping Radio Buttons with name Top ↑
The browser treats radio buttons with the same name as one mutually exclusive group.
<input type="radio" id="delivery_standard" name="delivery" value="standard">
<label for="delivery_standard">Standard</label>
<input type="radio" id="delivery_express" name="delivery" value="express">
<label for="delivery_express">Express</label>Selecting one option deselects the other option in the same group.
value Attribute Top ↑
The value is what the browser submits for the selected radio button.
<input type="radio" name="plan" value="basic">
<input type="radio" name="plan" value="pro">If the second option is selected, the submitted name/value pair is equivalent to:
plan=provalue is omitted, a selected radio control normally submits the default value on, which is rarely useful for distinguishing options.checked: Default Selection Top ↑
Add the Boolean checked attribute to the option that should be selected when the page first loads.
<input type="radio" id="gender_m" name="gender" value="Male" checked>
<label for="gender_m">Male</label>
<input type="radio" id="gender_f" name="gender" value="Female">
<label for="gender_f">Female</label>The user can normally choose another option before submitting the form.
What If No Radio Button Is Selected? Top ↑
If no option in the group is selected, that radio-group name is normally absent from the submitted data.
<input type="radio" name="contact" value="email">
<input type="radio" name="contact" value="phone">If neither option is selected, the browser does not normally submit a contact value.
Labels, fieldset and legend Top ↑
Use a label for every radio button and use <fieldset> with <legend> to describe a related group.
<fieldset>
<legend>Preferred contact method</legend>
<input type="radio" id="contact_email" name="contact" value="email">
<label for="contact_email">Email</label>
<input type="radio" id="contact_phone" name="contact" value="phone">
<label for="contact_phone">Phone</label>
</fieldset>This makes the group relationship clearer visually and for assistive technologies.
Required Radio Group Top ↑
When the form must contain one selected option, use required on a radio button in the group.
<fieldset>
<legend>Choose a plan</legend>
<input type="radio" id="plan_basic" name="plan" value="basic" required>
<label for="plan_basic">Basic</label>
<input type="radio" id="plan_pro" name="plan" value="pro">
<label for="plan_pro">Pro</label>
</fieldset>Disabled Radio Buttons Top ↑
<input type="radio" id="plan_enterprise" name="plan" value="enterprise" disabled>
<label for="plan_enterprise">Enterprise</label>A disabled radio button cannot normally be selected by the user and is not included in normal form submission.
If a disabled radio button is displayed as checked, do not expect that value to be submitted.
Radio Button vs Checkbox Top ↑
| Radio button | Checkbox |
|---|---|
| Choose one option from a mutually exclusive group. | Choose zero, one or several independent options. |
Buttons in one group use the same name. | Checkboxes may use separate names or a shared multi-value name depending on the data model. |
| Selecting one option deselects another option in the same group. | Selecting one checkbox does not normally deselect another checkbox. |
Examples:
- Preferred payment method: radio buttons, because one option is selected from the group.
- Programming languages known: checkboxes, because several choices may apply.
See HTML checkboxes.
Complete Form Example Top ↑
<form action="profile.php" method="post">
<fieldset>
<legend>Preferred contact method</legend>
<input type="radio" id="pref_email" name="contact" value="email" required>
<label for="pref_email">Email</label>
<input type="radio" id="pref_phone" name="contact" value="phone">
<label for="pref_phone">Phone</label>
</fieldset>
<button type="submit">Save</button>
</form>Receiving the Selected Value in PHP Top ↑
Do not assume that a radio-group field always exists. Validate the submitted value against the options the application permits.
<?php
$allowed=[
'email',
'phone'
];
$contact=$_POST['contact'] ?? null;
if($contact === null || !in_array($contact, $allowed, true)){
echo 'Select a valid contact method.';
}else{
echo htmlspecialchars(
$contact,
ENT_QUOTES,
'Windows-1252'
);
}See PHP form handling for processing and validating submitted values.
Video Tutorial Top ↑
Common Radio Button Mistakes Top ↑
Giving every option a different name Top ↑
If the options represent one mutually exclusive choice, they must share the same name. Different names create separate groups.
Giving every option the same value Top ↑
The group shares one name, but each option should have a value that identifies what the user selected.
Omitting value and receiving "on" Top ↑
Without an explicit value, a selected radio control normally submits on. Add meaningful values.
Assuming a radio value is always submitted Top ↑
If no radio button is selected, the group name can be absent from the submitted data.
Using radio buttons for multiple simultaneous choices Top ↑
Use checkboxes when several choices can apply at the same time.
Using the obsolete align attribute Top ↑
Use CSS for spacing, alignment and layout.
Trusting browser validation alone Top ↑
Required and disabled states improve the interface, but server-side code must still validate allowed values and permissions.
Frequently Asked Questions Top ↑
Give all radio buttons in the mutually exclusive group the same name attribute.
No. Selecting one radio button in a same-named group deselects the previously selected option in that group.
It defines the value submitted for the selected radio button.
The checked Boolean attribute makes that radio option selected when the page initially loads.
The radio-group field is normally absent from the submitted form data.
No. Disabled form controls are normally excluded from form submission.
Radio buttons are for one choice from a mutually exclusive group. Checkboxes allow independent selections and can support multiple choices.
Checkbox Drop-down Listbox HTML Form
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
