form属性使控件逻辑归属指定表单而非视觉移入，仅支持；必须配合name才能提交，disabled控件不提交，form与for功能无关，button[type="submit"]加form会强制提交目标表单。
form 属性不是把控件“移出”表单，而是让控件**逻辑归属**某个 <form></form> 元素——哪怕它在 DOM 树里完全不在那个 <form></form> 标签内部。它解决的是布局自由和语义完整之间的矛盾，不是视觉位移操作。
哪些元素能用 form 属性？
只有明确支持的表单控件才识别该属性：<input>、<textarea></textarea>、<select></select>、<button></button>、<output></output> 和 <label></label>。其他标签如 <div>、<code><p></p> 即使写了 form="xxx"，浏览器也直接忽略——不会报错，也不会生效。
常见错误现象：<div form="login"><input name="user"></div> 中的 <div> 加 <code>form 没意义，真正要加的是 <input> 自身。
form 属性必须配 name 才能提交
即使控件通过 form="myform" 正确关联到表单，如果它没有 name 属性，或 name=""，那它在 FormData 里就完全不会出现。这是最常被忽略的硬性条件。
- 验证方法很简单：
document.getElementById("myform").elements看返回的集合里有没有你那个外置控件 - 再监听
submit事件，打印：new FormData(event.target)，检查 key 是否存在、value 是否是你输入的内容 -
disabled的控件无论是否用form关联，都不会提交；readonly的则照常提交
form 和 for 完全是两回事
form 是控件自己的属性（比如 <input form="login">），决定它“属于哪个表单”，影响提交、重置、form.elements 遍历；for 是 <label></label> 的属性（比如 <label for="user"></label>），只控制点击时聚焦或切换目标控件，不参与表单数据流。
一个控件完全可以三者共存：<input id="user" name="username" form="login"><label for="user" form="login">用户名</label>。这里 <label></label> 的 form 属性让它「代表的控件」参与 login 表单提交，但点击 label 本身仍只触发聚焦，不会触发表单 submit。
button[type="submit"] 加 form 会改变提交目标
这是最容易引发意外行为的地方。默认情况下，<button type="submit"></button> 提交的是它最近的父级 <form></form>；但一旦加上 form="other-form"，它就会无视物理嵌套关系，强制提交指定的表单。
多个表单混排时尤其危险：
- 表单 A 里放了一个
<button form="B"></button>，点它会提交表单 B，而不是 A - 表单 B 里没放 submit 按钮，全靠表单 A 里的这个“越界按钮”驱动
- 如果表单 B 的
id写错或不存在，点击按钮无反应，也不报错——静默失败
真正容易被忽略的点是：它不改变任何视觉表现，也不抛错，只在提交行为上悄悄偏移。调试时得盯住 submit 事件的 event.target，而不是 DOM 位置。
