chrome 100+、firefox 95+、safari 16.4+ 及 edge 79+ 支持 input 的 form 属性跨级提交，旧版 safari（≤16.3）和部分国产双内核浏览器静默忽略，ie 完全不支持；该属性是 html5 正式标准，值必须严格匹配 form 的 id，且 input 必须有非空 name 才能提交。
input 的 form 属性在哪些浏览器能用
Chrome 100+、Firefox 95+、Safari 16.4+ 支持 form 属性跨级提交；旧版 Safari（≤16.3）和部分国产双内核浏览器（如早期 360、QQ 浏览器）会静默忽略该属性，不报错也不生效。
验证方式很简单：打开 DevTools 控制台，执行 document.getElementById("target-id").elements，如果返回的集合里包含你用 form="target-id" 关联的 <input>，说明已成功绑定；否则就是兼容性问题或写法错误。
-
form属性不是“实验特性”，而是 HTML5 正式标准，但落地节奏因厂商而异 - 移动端 WebView（如微信内置浏览器）通常跟随 iOS/Android 系统 WebView 版本，iOS 16.4+ 才稳定支持
- IE 完全不支持，Edge 79+（基于 Chromium）起支持
form 属性值必须严格匹配 form 的 id
form 属性只认 <form id="xxx"></form> 的 id，不认 name 或 class，且大小写、连字符、下划线全部敏感。
常见错误包括：form="login-form" 对应 <form id="login_form"></form>（下划线 vs 连字符）、form=" #login "（前后空格）、form="LoginForm" 对应 <form id="loginform"></form>（大小写不一致）。
- 页面中若存在多个相同
id，浏览器只绑定第一个，其余控件提交时被忽略 -
<form name="xxx"></form>写得再对也没用，form属性根本不会去找它 - 建议用纯字母+连字符命名，避免数字开头或特殊符号，降低解析歧义
为什么 input 提交了但后端收不到字段
最常被忽略的硬性条件：<input> 必须有 name 属性，且不能是空字符串；否则即使 form 绑定成功，也不会出现在 FormData 中。
验证方法：监听表单的 submit 事件，打印 new FormData(event.target)，检查 key 是否存在、value 是否是你输入的内容。
-
disabled的控件无论是否用form关联，都不会提交；readonly的则照常提交 -
type="image"明确不支持form属性，写了也无效 -
<input type="hidden" name="token" form="main">是高频合法用法，常用于模态框中携带 CSRF token
button 跨表单提交要同时满足两个条件
<button></button> 使用 form 属性跨容器提交时，必须同时满足：type="submit" + form="target-id"。漏掉任一，点击都无反应。
常见错误：<button form="login">登录</button> 等价于 type="button"，不会触发表单提交；<button type="reset" form="login"></button> 只重置目标表单，不提交。
- 多个
type="submit"按钮指向同一表单时，点击哪个，就提交哪个的name和value，其他按钮字段不会出现 - 不要给
type="button"或type="reset"加form，既无效又容易误导后续维护者 - 优先用
<button type="submit"></button>而非<input type="submit">，前者样式可控、无障碍支持更好
id 拼错、name 缺失或浏览器版本卡在临界点。动手前先跑一遍 document.getElementById(xxx).elements，比反复改 JS 更快定位根因。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
