无需 JavaScript，通过 的 name 和 value 属性即可实现多按钮单选提交，每个按钮既触发表单提交，又隐式携带选中值，服务端可直接通过 item 字段接收对应选项。

无需 javascript，通过 `` 的 `name` 和 `value` 属性即可实现多按钮单选提交，每个按钮既触发表单提交，服务端可直接通过 `item` 字段接收对应选项。

在标准 HTML 表单中， 本身不支持嵌套在 或 内部（语法非法且浏览器会自动修正或忽略），也无法将多个独立提交按钮“绑定”到同一个逻辑单选状态——但有一个简洁、语义清晰且完全无 JS 的原生方案：直接利用 元素的提交能力与表单数据承载机制。

标签在 type="submit" 模式下，不仅可触发表单提交，还支持 name 和 value 属性。当用户点击某个按钮时，该按钮的 name="item" 与 value="item 1" 会作为键值对随表单一同提交（类似隐藏域），而其他未点击的按钮不会产生同名字段——这天然实现了“单选式多提交入口”的行为。

✅ 正确写法如下：

Wechat HTML Publisher

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

下载

Submit Item 1 Submit Item 2

? 关键说明：

• 所有按钮共享 name="item"，确保服务端仅收到一个 item 参数（符合单选语义）；
• 每个按钮拥有唯一 value，代表所选选项；
• 浏览器原生支持，兼容所有现代及主流旧版浏览器（IE9+）；
• 无需任何额外 CSS 或 JS，无障碍友好（支持键盘聚焦与回车提交）；
• 表单仍可包含其他字段（如文本输入、隐藏域等），它们将与 item 一并提交。

⚠️ 注意事项：

• 不要混用 与上述按钮方案——二者逻辑冲突，会导致服务端收到冗余或不确定的 item 值；
• 避免省略 type="submit"：默认 type 在部分浏览器中为 submit，但规范要求显式声明以保证一致性；
• 若需视觉上更接近传统单选按钮（如带圆点图标），可通过 CSS 自定义 button 样式，但切勿用 label + input[type="radio"] 包裹 button——这会破坏表单提交逻辑且无效。

总结：这不是“hack”，而是 HTML 标准中被长期低估却高度实用的特性。用语义化 替代 + 单独提交按钮 的组合，既简化结构、提升可访问性，又完美满足“多入口、单值、无 JS”的核心需求。

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