HTML 单选按钮：name 分组、checked 与 required

HTML 参考手册

创建时间 2026-10-30 最后修改 2026-10-30

HTML <input type="radio"> 创建用于从相关选项中选择一项的单选按钮。具有相同 name 的按钮在同一表单中属于同一组；为每个选项提供不同的值。仅提交所选按钮的 name 和 value。

区分组名称与每个按钮的 id

同一组中的按钮共享一个名称，但用于关联标签的每个 ID 必须是唯一的。选择具有相同名称的另一个按钮会清除先前的选择。对于独立的问题，请使用不同的名称。fieldset 和 legend 提供了一个组及其问题，但单独的不同 fieldset 并不会将同名单选按钮分成不同的选择组。

表单所有权也会影响分组：不同表单中具有相同名称的按钮不一定形成一个组。下面的示例在同一表单中将水果组和体育组分开。

完整示例：检查两个问题的值

将以下文档保存为 radio-demo.html 并在浏览器中打开。必须选择一种水果，而棒球为默认体育项目。示例防止提交并在页面上显示当前值，因此不需要服务器处理程序。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>单选组与提交值</title>
</head>
<body>
  <h1>偏好选择练习</h1>
  <form id="choices">
    <fieldset>
      <legend>水果（必选）</legend>
      <input type="radio" id="apple" name="fruit" value="apple" required>
      <label for="apple">苹果</label>
      <input type="radio" id="banana" name="fruit" value="banana" required>
      <label for="banana">香蕉</label>
    </fieldset>
    <fieldset>
      <legend>运动</legend>
      <input type="radio" id="soccer" name="sport" value="soccer">
      <label for="soccer">足球</label>
      <input type="radio" id="baseball" name="sport" value="baseball" checked>
      <label for="baseball">棒球</label>
    </fieldset>
    <button type="submit">查看值</button>
    <button type="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>

最初没有选择水果，而棒球已被选中。按提交按钮：必须选择水果会阻止提交。
选择苹果并提交，输出包含 fruit=apple 和 sport=baseball。提交的是 value 中的 baseball，而不是显示文字“棒球”。
选择香蕉以清除苹果。选择足球以清除棒球；水果选择保持不变。
重置会恢复为无水果选择和默认的棒球选择。重置会恢复原始的勾选状态，而不是清除所有选择。