无需 JavaScript，通过 的 name 和 value 属性即可实现多按钮单选提交，每个按钮自身携带选项值，表单提交时自动以键值对形式发送至服务端。

无需 javascript，通过 `` 的 `name` 和 `value` 属性即可实现多按钮单选提交，每个按钮自身携带选项值，表单提交时自动以键值对形式发送至服务端。

在标准 HTML 表单中， 的核心语义是「从一组互斥选项中选择一项」，而 的核心能力是「触发表单提交并携带自定义值」。二者看似分离，实则可通过语义融合达成目标：用多个 submit 按钮替代传统 radio + 单一 submit 的组合，既保留单选逻辑（用户只能点击一个），又让每个按钮自身成为可提交的“选项载体”。

正确实现方式如下：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

Submit Item 1 Submit Item 2

✅ 原理说明：

• 所有 共享相同的 name="item"，浏览器在提交时仅将被点击的按钮的 value 作为 item 字段值发送（如 item=item%201）；
• 未被点击的按钮不会出现在请求参数中，天然满足单选约束；
• 服务端（如 PHP、Node.js、Python Flask 等）只需读取 item 参数即可获知用户选择，无需额外判断来源按钮。

⚠️ 注意事项：

• 必须显式设置 type="submit"（默认为 submit，但显式声明更安全，尤其在部分旧版浏览器或框架中）；
• 不要混用 与 submit 按钮——这会破坏语义一致性，且无法保证点击按钮时 radio 状态同步；
• 若需视觉上高亮已选状态（如禁用其他按钮），则需 JavaScript 辅助；但纯提交逻辑完全可零 JS 实现；
• 本身不支持内嵌元素，因此不能包裹 ，而 支持内联内容，但此处无需嵌套 radio—— 自身就是更简洁、更语义化的解决方案。

? 进阶提示：
你还可以为按钮添加 CSS 类实现统一风格，或使用 formaction 属性为不同按钮指定独立提交地址（覆盖

的全局 action），进一步增强灵活性。该方案完全符合 HTML5 规范，兼容所有现代浏览器及 IE9+，是兼顾语义、可用性与后端友好性的最佳实践。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！