HTML Radio Buttons: name Groups, checked Defaults, and required Validation
HTML <input type="radio"> creates radio buttons for choosing one item from related options. Buttons with the same name in the same form belong to a group; give each option a different value. Only the selected button’s name and value are submitted.
Distinguish the group name from each button’s id
Buttons in one group share a name, but each id used to associate a label must be unique. Selecting another button with the same name clears the earlier selection. Use different names for independent questions. fieldset and legend supply a group and its question, but separate fieldsets alone do not split same-name radio buttons into different selection groups.
Form ownership also affects grouping: buttons with the same name in different forms do not necessarily form one group. The example below separates fruit and sport groups within the same form.
Complete example: inspect values for two questions
Save the following document as radio-demo.html and open it in a browser. A fruit choice is required, while baseball is the default sport. The example prevents submission and displays the current values on the page, so no server handler is required.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Radio groups and submitted values</title>
</head>
<body>
<h1>Preference practice</h1>
<form id="choices">
<fieldset>
<legend>Fruit (required)</legend>
<input type="radio" id="apple" name="fruit" value="apple" required>
<label for="apple">Apple</label>
<input type="radio" id="banana" name="fruit" value="banana" required>
<label for="banana">Banana</label>
</fieldset>
<fieldset>
<legend>Sport</legend>
<input type="radio" id="soccer" name="sport" value="soccer">
<label for="soccer">Soccer</label>
<input type="radio" id="baseball" name="sport" value="baseball" checked>
<label for="baseball">Baseball</label>
</fieldset>
<button type="submit">Show values</button>
<button type="reset">Reset</button>
</form>
<pre id="result" aria-live="polite"></pre>
<script>
const form = document.getElementById('choices');
const result = document.getElementById('result');
form.addEventListener('submit', (event) => {
event.preventDefault();
result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
});
form.addEventListener('reset', () => { result.textContent = ''; });
</script>
</body>
</html>- Initially no fruit is selected and baseball is selected. Press the submit button: the required fruit choice prevents submission.
- Select Apple and submit. The output contains fruit=apple and sport=baseball. The data uses baseball from value, not the displayed sport label.
- Select Banana to clear Apple. Select Soccer to clear Baseball; the fruit selection remains unchanged.
- Reset restores no fruit selection and the default Baseball selection. Reset restores the original checked states rather than clearing every selection.
checked, required, and submitted values
checked is a Boolean attribute for the initial selection. checked="false" still has the attribute present and is not a correct way to express false. Omit it for an initially unselected option. Read or change the current state with the JavaScript checked property.
If any button in a group has required, one button in that group must be selected. The selected button does not itself have to carry required. Both fruit options have it here to make the requirement clear.
An unselected group is omitted from submitted entries. A selected option without value can submit the default string on, so specify a distinguishing value for each option. Disabled buttons cannot be operated and are excluded from submission. Even with browser validation, validate allowed values again on the server.
Clearing a choice and using the keyboard
Clicking an already selected radio button does not clear it like a checkbox. If users need to choose “None,” design that as a separate option. Use checkboxes for a question where several items can be toggled independently.
Associate labels so that clicking their text selects the options. Keep native keyboard behavior: use Tab to reach the group, then arrow keys to move and select. Exact focus behavior can differ between browsers. The MDN radio input reference explains attributes and submission rules.
