Radio Buttons — Complete Guide
Radio Buttons — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of HTML Tutorial on Toolliyo Academy.
On this page
HTML Tutorial · Lesson 25 of 100
Radio Buttons
Basics ✓ → Forms & semantics → APIs & performance → Projects
Forms & semantics · 2 — Forms, SEO, a11y · ~6 min · HTML — Forms & Validation
What is this?
Radio inputs in the same name group allow one choice among options.
Why should you care?
MarkupVerse plan pickers and yes/no questions use radios.
See it live — copy this example
Save as demo.html and open in your browser, or use Run Example below.
<fieldset>
<legend>Plan</legend>
<label><input type="radio" name="plan" value="starter" checked> Starter</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
<label><input type="radio" name="plan" value="business"> Business</label>
</fieldset>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Same name = one group.
- fieldset/legend labels the group.
- value is submitted.
Practice next
- Build a 3-option plan group.
- fieldset/legend.
- Check one default.
- Make Pro required via custom JS check.
- Add disabled on Business.
Remember
Shared name. fieldset/legend. One selection.
MarkupVerse plan radios
Pricing form picks one plan.
Outcome: Only one plan value submits.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
