form属性仅在type="submit"且值严格匹配目标form的id时生效，大小写、空格、不可见字符均敏感，旧版safari等浏览器会静默忽略，动态渲染需确保form已挂载到dom。
form 属性能跨容器关联，但不是写了就生效——它只在 type="submit" 且目标 form 的 id 完全匹配时才起作用，旧版 Safari 和部分双内核浏览器会静默忽略。
form 属性值必须严格等于目标 form 的 id
浏览器只认 id，不接受 name、class 或任何模糊匹配。大小写、连字符、空格、不可见字符全算在内。
-
form="search-form"必须对应<form id="search-form"></form>，写成id="search_form"或id="Search-Form"都失效 - 前后带空格如
form=" search-form "也不行，浏览器不自动 trim - 页面中存在多个相同
id="search-form"时，行为未定义，通常只绑定第一个 - 用 DevTools 搜索
id="search-form"，比反复改 JS 更快确认是否存在
button 必须显式声明 type="submit"
省略 type 或写成 type="button" 时，form 属性完全无效——点击按钮不会触发表单提交，控制台也无报错。
-
<button type="submit" form="login-form">登录</button>✅ -
<button form="login-form">登录</button>❌（等价于type="button"） -
<button type="reset" form="login-form">重置</button>⚠️（只重置，不提交） -
<button type="image"></button>不支持form属性，即使加了也无效
跨容器提交的兼容性与 DOM 时机问题
Chrome 100+、Firefox 95+、Safari 16.4+ 支持稳定；Safari ≤16.3、IE、部分国产双内核浏览器会忽略该属性。
- 动态渲染的表单（如 Vue/React 中通过响应式变量生成），必须确保组件挂载完成、
<form id="xxx"></form>已真实存在于 DOM 后，form属性才有效 - 表单在 Shadow DOM 内部，而按钮在 light DOM 时，
form属性跨 boundary 失效 - 表单含
required字段但为空，校验失败会阻断提交——这不是form属性的问题，而是原生校验在起作用 - 不要混用：
form="xxx"和onclick="event.preventDefault(); document.getElementById('xxx').submit();"，后者绕过校验和 submit 事件监听
JavaScript 获取实际关联表单别用 closest
旧代码习惯用 button.closest('form') 找父级表单，但在 form 属性场景下会返回 null，因为按钮可能根本不在任何 form 元素内部。
- 正确方式是读取原生属性：
button.form，它直接返回对应的<form></form>元素 - jQuery 用户不能依赖
$('button').closest('form')，应改用document.querySelector(`form[id="${btn.form.id}"]`) - 服务端永远要做兜底校验——前端靠
form属性提交的数据，不能作为唯一可信来源
最容易被忽略的，是检查目标 <form id="xxx"></form> 是否真正在当前文档中存在、是否被 JS 移走、是否卡在 Shadow DOM 里——而不是先怀疑语法或浏览器兼容性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
