htmlradio 单选按钮怎么用：从基础写法到表单提交
“htmlradio”通常不是一个独立的 HTML 标签，而是对 HTML 单选按钮的俗称。它对应的写法是 <input type="radio">。单选按钮适合让用户从一组互斥选项中选择一个，例如支付方式、订单状态或联系偏好。本文从基础结构讲起，逐步说明分组规则、表单提交、JavaScript 读取、校验与安全边界，并提供可以直接运行的示例。
一、什么时候使用单选按钮
当选项数量不多，而且用户应该从中选出一个明确答案时，通常可以使用单选按钮。例如：
- 选择配送方式：普通配送、次日达、自提。
- 选择账户类型：个人、企业。
- 回答互斥问题：是、否、不确定。
如果用户可以同时选择多个选项，应使用复选框（type="checkbox"）。如果选项很多，或者需要节省页面空间，可以考虑下拉列表；但对于重要选项，单选按钮能让可选项一目了然。具体控件应结合选项数量、页面布局和无障碍需求决定。
二、最基本的写法
单个单选按钮的基本结构如下：
<label>
<input type="radio" name="contact" value="email">
通过电子邮件联系
</label>type="radio" 指定控件类型；name 用于确定单选分组，也是提交表单时使用的字段名；value 是被选中后提交的值。用户看到的“通过电子邮件联系”是标签文字，并不会自动成为提交值。
一组互斥选项需要使用相同的 name：
<fieldset>
<legend>希望通过哪种方式联系？</legend>
<label>
<input type="radio" name="contact" value="email">
电子邮件
</label>
<label>
<input type="radio" name="contact" value="phone">
电话
</label>
<label>
<input type="radio" name="contact" value="sms">
短信
</label>
</fieldset>在同一表单中，这三个选项属于同一组：选中一个后，其他选项会自动取消选中。<fieldset> 和 <legend> 用于组织相关控件并提供组标题，尤其有助于屏幕阅读器用户理解这些选项之间的关系。
三、分组规则与容易忽略的边界
判断单选按钮是否互斥，不能只看它们在页面上是否挨在一起。通常，同名且属于同一表单所有者、位于同一文档树中的单选按钮会组成一组。最常见、也最易维护的做法是：把一组按钮放在同一个表单中，并为它们设置完全相同的 name。
- 同一组使用相同 name：拼写、大小写都要一致。
plan和Plan是不同名称。 - 不同的问题使用不同 name：否则用户在一个问题中选择答案，可能会取消另一个问题的选中状态。
- 不同表单可以重复使用 name：表单所有者不同的控件不会仅因名称相同就变成同一组。
- 注意 form 属性：控件可以通过
form属性关联到页面上的某个表单，即使它在表单标签之外。此时应根据它实际关联的表单判断归属。
下面的示例有两个独立问题，所以使用两个不同的 name：
<fieldset>
<legend>会员类型</legend>
<label><input type="radio" name="memberType" value="personal">个人</label>
<label><input type="radio" name="memberType" value="business">企业</label>
</fieldset>
<fieldset>
<legend>通知方式</legend>
<label><input type="radio" name="noticeMethod" value="email">邮件</label>
<label><input type="radio" name="noticeMethod" value="sms">短信</label>
</fieldset>四、标签关联与可访问性
每个单选按钮都应有清晰、可点击的文字标签。最简洁的方式是把控件放在 <label> 内，如前面的示例。也可以使用 id 和 for 建立显式关联：
<input type="radio" id="pay-card" name="payment" value="card">
<label for="pay-card">银行卡</label>for 的值必须与对应控件的 id 一致，并且页面中的 id 应保持唯一。标签关联后，用户点击文字也可以选中按钮；辅助技术也能将标签读作控件名称。仅把说明文字放在按钮旁边，却没有使用 <label>，会让点击和辅助技术体验变差。
一组选择题还应提供组标题。对于普通表单，优先使用原生的 <fieldset> 和 <legend>，不要只靠视觉上的缩进或颜色传递组关系。
五、checked、value 与默认值
checked 表示该选项初始处于选中状态，是一个布尔属性。写上该属性即表示为真；HTML 中写成 checked="false" 仍然相当于写了 checked，不会得到“未选中”的效果。要取消默认选中，应移除这个属性。
<label>
<input type="radio" name="delivery" value="standard" checked>
普通配送（默认）
</label>一组按钮中最多只应指定一个默认选项。若同组的多个按钮在 HTML 中都写了 checked，浏览器最终只会保留该组中的一个选中项；不要依赖这种情况下的处理结果，应明确只设置一个。
value 是提交给服务器的值，不是按钮旁边显示的文字。建议为每个选项设置明确、稳定且便于后端识别的值，例如 standard、express，而不要依赖界面文字。
如果省略 value，选中该按钮后提交的值会是字符串 on。这通常不够明确，因此实际表单中应显式设置 value。同一组的不同选项也应使用不同值；否则服务器可能无法判断用户选中了哪一个。
六、required 与表单校验
给同一组中的单选按钮设置 required，可以要求用户至少选择该组中的一个选项。为避免误解，可以只在组中的一个按钮上添加该属性；同组内任意一个选项被选中后，这组就满足该必填要求。
<fieldset>
<legend>选择配送方式</legend>
<label>
<input type="radio" name="delivery" value="standard" required>
普通配送
</label>
<label>
<input type="radio" name="delivery" value="express">
次日达
</label>
</fieldset>浏览器会在提交时进行原生校验，但客户端校验不是安全边界。用户可以关闭 JavaScript、修改页面或直接构造 HTTP 请求，因此服务端必须再次检查字段是否存在、值是否属于允许范围。
如果业务上允许用户不选任何选项，就不要把这组设为必填。也可以提供一个语义明确的初始选项，但要注意：默认选中意味着用户即使没有主动选择，也会提交该值。对于需要用户明确确认的事项，不应通过默认勾选或默认选中掩盖这一事实。
七、表单提交时发生什么
单选按钮只有在选中、未禁用，并且具有可提交字段名等条件满足时，才会作为表单数据提交。表单提交的字段名来自 name，字段值来自 value。同组未选中的按钮不会提交；如果整组都没有选中，通常也不会产生这个字段。
下面是一个可直接保存为 HTML 文件并在浏览器中运行的完整示例。选择配送方式并提交后，页面会显示实际发送的表单数据：
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>配送方式选择</title>
</head>
<body>
<form action="/orders" method="get">
<fieldset>
<legend>选择配送方式</legend>
<label>
<input type="radio" name="delivery" value="standard" required>
普通配送
</label>
<label>
<input type="radio" name="delivery" value="express">
次日达
</label>
</fieldset>
<button type="submit">提交</button>
</form>
</body>
</html>选择“次日达”后，浏览器以 GET 方法提交时，查询字符串中会包含类似 delivery=express 的参数。若没有选中任何一项，浏览器会先按 required 规则阻止正常提交并提示用户。真实业务通常会通过 HTTPS 使用 POST 提交敏感或会改变状态的数据；GET 请求参数会出现在 URL 中，不适合放置机密信息。
表单数据是“名称—值”集合，而不是包含所有界面文字的页面快照。后端应根据字段名读取值，并明确处理字段缺失、值不合法和重复参数等情况。
八、用 JavaScript 读取选中值
可以通过 FormData 读取原生表单值。下面的示例拦截提交，在页面中显示选中的配送方式：
<form id="delivery-form">
<fieldset>
<legend>选择配送方式</legend>
<label><input type="radio" name="delivery" value="standard" required>普通配送</label>
<label><input type="radio" name="delivery" value="express">次日达</label>
</fieldset>
<button type="submit">查看选择</button>
</form>
<p id="result" aria-live="polite"></p>
<script>
const form = document.querySelector("#delivery-form");
const result = document.querySelector("#result");
form.addEventListener("submit", (event) => {
event.preventDefault();
const data = new FormData(form);
const delivery = data.get("delivery");
result.textContent = `选中的配送方式：${delivery}`;
});
</script>FormData.get("delivery") 返回该名称对应的值；如果没有选中项，结果为 null。这里将结果写入 textContent，而不是 innerHTML，避免把数据当作 HTML 解析。若需要直接查询控件，也可以使用：
const selected = document.querySelector(
'input[name="delivery"]:checked'
);
const value = selected ? selected.value : null;当用户更改选项时，通常可以监听该组控件的 change 事件。若使用 DOM 属性读取状态，需区分 HTML 中的初始 checked 属性与运行时状态：JavaScript 中的 input.checked 反映当前是否选中；初始属性不一定会随着用户操作更新。
九、常见属性能做什么，不能做什么
name：标识字段并参与分组。不同问题应使用不同名称。value：指定选中时提交的字符串值。单选按钮没有专门的数值范围校验。checked：指定初始选中状态，是布尔属性。required：要求该组至少选中一项，属于浏览器端约束校验。disabled：禁用控件，用户通常无法操作；禁用控件不会作为表单数据提交。form：将控件关联到指定表单的id，即使控件不在表单标签内部。id：用于标签关联、脚本选择等用途；应保证文档内唯一。
min、max、step 等属性不用于限制 radio 的可选值。单选按钮也没有内置的“至少选两项”或“最多选三项”等规则；如果业务规则超出原生单选组的能力，需要使用其他控件或通过脚本和服务端实现，并确保服务端也执行校验。
同样，required 不能证明用户阅读或理解了内容，也不能防止恶意请求。它只是在浏览器正常执行表单校验时提供便利。
十、常见错误与排查方式
- 同一组选项的 name 不一致。
结果是多个按钮可以同时选中，或提交时落入不同字段。检查名称是否逐字相同。 - 把不同问题写成相同的 name。
选择其中一题时，另一题的选择被取消。为每个独立问题使用不同名称。 - 省略 value。
选中后可能提交默认值on，不便于后端判断。给每个选项设置有意义的值。 - 把显示文字当成提交值。
浏览器不会自动提交标签内容；后端收到的是value。 - 一个组设置多个默认选项。
不要依赖浏览器对冲突标记的处理，明确只保留一个checked。 - 用 checked=”false” 取消选中。
布尔属性只要出现就表示启用。删除checked才是未选中。 - 缺少标签或组标题。
用户不容易点击文字，辅助技术也难以理解选项含义。使用<label>，并为一组相关选项提供<fieldset>和<legend>。 - 只依靠前端约束信任提交数据。
请求可能绕过浏览器。服务端应验证字段是否允许缺失、值是否有效，并按业务规则处理。
十一、服务端校验与安全用途
radio 的选项由页面提供，并不意味着用户只能提交这些值。用户可以通过开发者工具、脚本或直接构造请求发送任意字符串。因此，后端应将提交值与明确的允许列表比较，例如只接受 standard 或 express，并对缺失值、未知值和重复参数采取符合业务要求的处理。
对于会改变数据的请求，还应采用与应用架构相匹配的身份验证、授权、CSRF 防护和审计措施。单选按钮不是权限控制，也不是安全机制；把某个选项隐藏或设为 disabled，都不能阻止用户伪造请求。展示用户提交的内容时还应按输出位置进行正确编码，避免把不可信字符串作为 HTML 执行。
总结
HTML 单选按钮的核心是 <input type="radio">：同一组选项使用相同的 name，不同问题使用不同名称；每项设置明确的 value，并通过 <label> 提供可理解的说明。需要强制选择时使用 required，需要读取数据时可使用 FormData。但浏览器校验和界面限制只改善交互，不构成安全保障；服务端仍须验证收到的值，并按业务规则处理。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
