button 的 form 属性可用，但要求目标 form 必须有匹配的 id，且不支持 IE、Safari 15.4 以下；失效主因是 form 缺 id、DOM 未就绪、Shadow DOM 隔离、校验失败或值为空；需权衡原生校验与手动 submit。
button 的 form 属性是否可用？
能用，但有硬性前提：目标 必须有 id，且值与按钮的 form 属性完全一致（大小写、空格、不可见字符都算）。不支持 IE，Safari 15.4 以下版本会静默忽略。Chrome 和 Firefox 支持稳定。
为什么写了 form="myForm" 却没触发提交？
失效通常不是语法错，而是配套脱节：
-
缺少id="myForm"——name或class不起作用 - 表单被 JS 动态移除或尚未渲染完成，按钮点击时 DOM 中查不到该
id - 表单在 Shadow DOM 内部，而按钮在 light DOM，
form属性跨 Shadow boundary 失效 - 多个表单用空格分隔：
form="a b"，但浏览器只提交第一个有效表单，第二个不会合并发送 - 表单含
required字段为空，校验失败 → 提交被阻断，不是属性没生效
用 form 属性还是手动调 submit()？
选哪个取决于你是否需要原生校验和语义行为：
- 要
required/pattern校验、回车提交、无障碍提示 → 用form属性 +type="submit" - 要跳过前端校验（比如“暂存草稿”）→ 用
document.getElementById('myForm').submit()，但注意它不触发submit事件监听器 - 别混用：同时设
form="myForm"和onclick="event.preventDefault(); myForm.submit();"，结果是校验被绕过、错误提示消失、用户无法感知失败原因
移动端和 Vue/React 里要注意什么？
动态框架和移动环境容易放大细节问题：
- Vue/React 中，如果
form值来自响应式变量，必须确保组件挂载时该值已为非空字符串，否则初始 DOM 根本不带form属性 - 纯图标按钮（如仅含
）必须加aria-label，否则屏幕阅读器读不出“这是登录表单的提交按钮” - iOS 某些版本对
form关联后的焦点管理较弱，建议真机测试，别信模拟器反馈 -
display: none或visibility: hidden的表单仍可提交，但用户看不到验证错误提示——这不是form属性的问题，是 UI 状态没同步
实际最常被忽略的，是检查目标 是否真的存在、是否被 JS 移走、是否卡在 Shadow DOM 里。写完 form="xxx" 后，直接打开 DevTools 搜 id="xxx"，比反复改 JS 更快定位问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
