- 1HTML Forms
- 2HTML form Tag
- 3HTML Input Types
- 4HTML Labels and Placeholders
- 5HTML Select Dropdown
- 6HTML Checkbox
- 7HTML Radio Buttons
- 8HTML Textarea
- 9HTML Submit and Reset Buttons
- 10HTML Form Validation
- 11HTML Required Fields
- 12HTML Input Pattern Attribute
- 13HTML min and max Attribute
- 14HTML Form Action and Method
- 15HTML Fieldset and Legend
- 16HTML Form Advanced Controls
- 17HTML Date Picker
- 18HTML Range Slider
- 19HTML Color Picker
- 20HTML File Upload
- 21HTML Datalist
- 22HTML Autofocus and Autocomplete


- 1HTML Forms
- 2HTML form Tag
- 3HTML Input Types
- 4HTML Labels and Placeholders
- 5HTML Select Dropdown
- 6HTML Checkbox
- 7HTML Radio Buttons
- 8HTML Textarea
- 9HTML Submit and Reset Buttons
- 10HTML Form Validation
- 11HTML Required Fields
- 12HTML Input Pattern Attribute
- 13HTML min and max Attribute
- 14HTML Form Action and Method
- 15HTML Fieldset and Legend
- 16HTML Form Advanced Controls
- 17HTML Date Picker
- 18HTML Range Slider
- 19HTML Color Picker
- 20HTML File Upload
- 21HTML Datalist
- 22HTML Autofocus and Autocomplete




- 1Accessibility in HTML
- 2Alt Text for Images
- 3ARIA Roles in HTML
- 4Semantic HTML for Accessibility
- 5Keyboard Navigation in HTML
- 6Screen Reader Accessibility in HTML
- 7HTML Best Practices for SEO
- 8HTML Meta Tags
- 9HTML Headings Best Practices
- 10Title and Meta Description Tags in HTML
- 11HTML Linking Structure
- 12HTML Clean Code Standards

HTML Radio Buttons
Single-Choice Input in Forms
HTML Radio Buttons: Making One Choice, Clearly
Radio buttons are used when you want users to pick just one option from a set — and only one. Whether you're asking for a favorite fruit or selecting a payment method, radio buttons help guide clean, exclusive decisions.
Creating a Single Group of Radio Buttons
Radio buttons are created using <input type="radio">
. All buttons in the same group must share the same name
. Each one should have a unique value
and an id
for labeling.
<p>Pick your favorite fruit:</p>
<input type="radio" id="apple" name="fruit" value="apple">
<label for="apple">Apple</label><br>
<input type="radio" id="banana" name="fruit" value="banana">
<label for="banana">Banana</label><br>
<input type="radio" id="cherry" name="fruit" value="cherry">
<label for="cherry">Cherry</label>
◯ Apple
◯ Banana
◯ Cherry
Only one button can be selected at a time. Selecting one automatically deselects the others.
Setting a Default Selection
Use the checked
attribute to preselect a value:
<input type="radio" id="banana" name="fruit" value="banana" checked>
<label for="banana">Banana</label>
◉ Banana
This makes "Banana" the selected option when the page loads.
Radio Buttons Inside a Form
Let’s wrap them in a full form that users can submit:
<form action="/submit" method="post">
<p>Choose one fruit:</p>
<input type="radio" id="apple" name="fruit" value="apple">
<label for="apple">Apple</label><br>
<input type="radio" id="banana" name="fruit" value="banana">
<label for="banana">Banana</label><br>
<input type="radio" id="cherry" name="fruit" value="cherry">
<label for="cherry">Cherry</label><br><br>
<input type="submit" value="Submit">
</form>
Choose one fruit:
◯ Apple
◯ Banana
◯ Cherry
[Submit]
Only one value (like "cherry") will be submitted with the form under the name fruit
.
Grouping Radio Buttons with Fieldset
Use <fieldset>
and <legend>
for better organization and accessibility.
<fieldset>
<legend>Pick one:</legend>
<input type="radio" id="item1" name="choice" value="item1">
<label for="item1">Item 1</label><br>
<input type="radio" id="item2" name="choice" value="item2">
<label for="item2">Item 2</label>
</fieldset>
Pick one:
◯ Item 1
◯ Item 2
Best Practices
- Use the same
name
for all options in a group - Label each radio button with
<label>
for usability - Use
checked
for default selections only when it makes sense - Group related radio buttons with
<fieldset>
and<legend>
Common Mistake to Avoid
Giving each radio button a different name
prevents them from behaving as a group.
<!-- This will NOT work as expected -->
<input type="radio" name="apple" value="apple">
<input type="radio" name="banana" value="banana">
This will allow multiple selections — which defeats the point of radio buttons. Stick to a shared name
.
Summary
Radio buttons are designed for exclusive choices. They are simple, intuitive, and easy to implement. You now know how to:
- Create single-selection groups with
<input type="radio">
- Set default selections using
checked
- Group and label radio buttons semantically
What’s Next?
Now that you’ve handled text inputs, checkboxes, and radio buttons — it’s time to dive into Textareas in HTML for larger, multi-line input fields.