不能无脑用，尤其旧版 Safari 和部分 Android WebView 会忽略 form 属性；它仅在控件完全游离于任何 外时生效，且必须指向同文档中 的 id，DOM 位置优先级高于 form 属性。
form 属性在 <input> 等控件上是否真能跨浏览器用？
不能无脑用，尤其在旧版 Safari 和部分 Android WebView 中会直接忽略 form 属性。它只在控件**不在表单内部**时才生效，且必须指向同文档中一个 <form></form> 元素的 id。Chrome、Firefox、Edge（Chromium）基本没问题，但 Safari ≤ 15.6 对 form 属性的动态变更（比如 JS 改 element.form = formEl）不触发关联，提交时仍按 DOM 位置归属。
form 属性和 DOM 位置冲突时以谁为准？
DOM 位置优先级更高。即使给一个在 <form id="a"></form> 内部的 <input> 设置 form="b"，它仍然属于 form#a —— 浏览器会无视该 form 属性。只有当控件**完全游离于任何 <form></form> 标签之外**（比如放在 直接子级或 <div> 里），<code>form 属性才会生效。
- ✅ 正确用法：
<form id="myform"></form> <input type="text" form="myform">
- ❌ 无效写法：
<form id="myform"> <input type="text" form="otherform"> <!-- 被忽略 --> </form>
用 JS 动态设置 form 属性要注意什么？
不能只改 element.setAttribute('form', 'id') 就完事。部分浏览器（尤其是 Safari）不会因此重建控件与表单的关联关系，导致 form.elements 不包含它，提交时也不收集值。必须用 element.form 属性赋值，并确保目标 <form></form> 已挂载到文档中。
- 推荐写法：
const input = document.querySelector('input'); const form = document.getElementById('myform'); input.form = form; // ✅ 触发关联更新 - 避免写法：
input.setAttribute('form', 'myform'); // ❌ Safari 可能不响应 - 注意：如果
form元素尚未插入 DOM，赋值input.form = form会静默失败，input.form返回null
替代方案：什么时候该放弃 form 属性改用 JS 提交？
当需要强控制字段归属、支持老旧 WebView、或控件需频繁切换所属表单时，form 属性反而增加不确定性。更稳的做法是剥离语义关联，用 JS 手动收集数据并调用 form.requestSubmit() 或 fetch。
- 适用场景：模态框里的表单字段、拖拽排序后动态生成的输入项、跨 Shadow DOM 的控件
- 关键点：别依赖
form.elements自动聚合，改用querySelectorAll('[name]')+ 显式过滤 - 兼容底线：
requestSubmit()在 IE 完全不支持，如需兼容 IE，必须降级为form.submit()或纯 fetch
真正麻烦的不是写法，而是不同浏览器对“控件归属”的判定逻辑不一致——DOM 位置、form 属性、JS 赋值三者之间存在隐式优先级，而这个优先级在规范里没写透，只能靠实测收敛边界。
