h5 中 form 属性可将 submit 按钮关联至任意位置的表单,实现外部提交;其值为对应 form 的 id,触发标准提交并使用该表单的 action/method,chrome 10+ 等现代浏览器支持,ie 不推荐使用。

在 H5 中,可以通过 form 属性将 <input type="submit"> 元素“关联”到页面中任意位置的 <form></form>,实现表单外部提交,无需把按钮写在 <form></form> 内部。
form 属性的作用
form 是 HTML5 为表单控件(如 input、button、textarea 等)新增的全局属性。它接收一个字符串值,对应目标 <form></form> 元素的 id。只要设置了该属性,浏览器就会把这个控件当作该表单的一部分来处理——点击时触发表单提交,且提交数据包含该表单内所有有效控件的值。
基本用法示例
以下代码中,提交按钮位于 <form></form> 外部,但通过 form="myForm" 明确绑定:
注意事项与常见问题
使用时需注意以下几点,避免行为异常:
-
form 的 id 必须唯一且匹配:按钮的
form值必须严格等于目标<form></form>的id,大小写敏感,不能有空格或特殊字符 -
仅支持原生表单提交:该机制触发的是标准表单提交(会跳转或刷新),如需阻止默认行为并用 JS 提交,仍要监听
submit事件并在表单上处理 -
不继承表单的 action/method,但会使用其值:按钮自身不定义
action或method,提交时完全采用所绑定<form></form>的配置 - 兼容性良好:Chrome 10+、Firefox 4+、Safari 5.1+、Edge 全版本均支持,IE 不支持(IE10/11 部分支持但有 bug,不建议在 IE 环境依赖此特性)
替代方案对比
若需兼容老浏览器或更灵活控制,可考虑:
- 用
<button type="submit" form="xxx"></button>—— 同样支持form属性,且比input更易样式化 - 用 JS 绑定点击事件:
document.getElementById('btn').onclick = () => document.getElementById('myForm').submit() - 把按钮放回
<form></form>内部并用 CSS 定位到外部视觉区域(如绝对定位),语义更清晰且兼容性最好











