form属性使input等控件逻辑归属指定form，需同时满足name属性非空且form值严格匹配目标form的id；支持元素包括input、textarea、select、button（submit/reset）、output、label。
直接说结论：form 属性能让 <input> 等控件“逻辑归属”到指定 <form>，哪怕它在 DOM 里完全不在那个 <form> 标签内部——但必须同时满足两个硬条件：控件要有 name，且 form 的值要严格匹配目标表单的 id。
哪些元素能用 form 属性？
只有浏览器明确支持的表单控件才识别该属性，其他标签加了也白加：
-
<input>（所有 type，包括hidden、radio、checkbox） <textarea><select>-
<button>（仅type="submit"或type="reset"时生效） -
<output>和<label>（<label>加form不影响点击行为，只影响它所关联控件是否参与提交）
常见错误：给 <div> 或自定义组件加 form="login" —— 浏览器静默忽略，控制台不报错，但数据根本不会进 FormData。
form 属性为什么没生效？
最常踩的坑就两个，且缺一不可：
立即学习“前端免费学习笔记（深入）”；
-
form的值必须是目标<form id="xxx">的id，大小写敏感、不能带#、不能是 class 名或任意字符串 - 控件自身必须有
name属性，且值非空；name=""或没写name，FormData 里就看不到它 - 控件若设为
disabled，无论form是否正确，都不会提交；readonly不影响提交
验证方法很直接：打开 DevTools，运行 document.getElementById("target-form-id").elements，看返回集合里有没有你那个“飞出去”的控件；再监听 submit 事件，打印 new FormData(event.target)，确认 key 和 value 是否如预期。
form 和 for 完全不是一回事
这两个属性都带“关联”意味，但职责完全不同：
-
form="login"是控件自己的属性，决定它“属于哪个表单”，影响form.elements遍历、FormData序列化、以及<button type="submit">点击时提交谁 -
for="user"是<label>的属性，只负责点击时聚焦或切换对应<input id="user">的状态，不参与表单数据流 - 一个
<input id="user" name="username" form="login">可以配<label for="user">，三者各干各的，互不干扰
特别注意：<button type="submit" form="login"> 点击时，会强制提交 id="login" 的表单，而不是它自己所在的父级 <form>（如果有的话）——这个行为容易被忽略，导致“点了按钮却提交了错的表单”。
典型使用场景和易错点
高频用法其实很务实：
-
<input type="hidden" name="csrf_token" form="main">：模态框里放 CSRF token，不破坏布局又确保提交 -
<input type="radio" name="plan" value="pro" form="checkout">：把付费选项放在侧边栏，仍归属主结算表单 -
<button type="submit" form="search">全局搜索</button>：按钮完全独立于任何<form>标签
静默失败风险最大：目标 <form id="B"> 写成 form="b"，按钮点击毫无反应，也不报错；IE 全系不支持该属性，若需兼容 IE，必须降级为 JS 手动收集并提交。
