A webpage is not always broken because of a large mistake. Small details can produce exactly this problem: debugging: radio buttons allow multiple selections. This guide shows you what to look for, a concrete fix, and how to check that it worked.
The Idea in Plain English
Radio options belong to one group only when they share the same name. Different names create independent groups.
You can test this using a small local HTML file. Change one part at a time and check the result in the browser before adding more code.
A Working Example
The first part shows a problem. The second part shows a safer or more accurate version. Compare them before reading the explanation.
<!-- Problem -->
<input type="radio" name="red" value="red"> Red
<input type="radio" name="blue" value="blue"> Blue
<!-- Corrected example -->
<fieldset>
<legend>Choose one color</legend>
<label><input type="radio" name="color" value="red"> Red</label>
<label><input type="radio" name="color" value="blue"> Blue</label>
</fieldset>What Each Part Does
- The input creates a field; its type changes the editing controls and the name identifies submitted data.
- A fieldset groups controls that answer one related question.
- A legend states the question shared by a fieldset.
- type chooses the relevant kind of script, input, media or embedded object.
- name identifies a field in submitted form data or a named metadata entry.
- value specifies a form value or a machine-readable value.
Before the fix, the browser can behave incorrectly or report a warning. After the change, test the exact failure rather than assuming the page is fixed.
Try It Yourself
Selecting Blue should deselect Red in the same group.
Common Beginner Mistakes
- Check the underlying cause before changing unrelated tags.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Radio options belong to one group only when they share the same name. Different names create independent groups.
- Before the fix, the browser can behave incorrectly or report a warning. After the change, test the exact failure rather than assuming the page is fixed.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.