先记住这个答案
HTML 表单归属不完全依赖 DOM 嵌套。一个 <input>、<button> 等表单相关元素可用 form 属性指向同文档表单的 id，即使视觉上放在固定页脚也能参与提交。关联的是具体控件，不是其整个后代树；字段仍要有 name、处于可提交状态才能进入数据。
form值对应表单的id- 控件可位于表单 DOM 外
- 提交按钮也可远程触发表单
- 关联不会自动传递给所有后代
固定操作栏怎样提交正文表单
长表单的“保存”按钮可能固定在页面底部，不方便写在 <form> 标签内部。按钮写 form="profile" 后，点击时仍会触发表单的原生校验与提交；其他不相关表单不会被它误触发。表单 id 必须唯一、匹配。
<form id="profile" action="/profile" method="post">
<label for="nick">昵称</label>
<input id="nick" name="nick" required>
</form>
<footer>
<button type="submit" form="profile">保存资料</button>
</footer>按钮虽在表单外，仍是 profile 的提交按钮。若它只用于打开预览而非提交，应写 type="button"，不要因为有 form 关联就忽略按钮类型。
关联表单不等于忽略成功控件规则
表单外的输入若设置了 form 和 name，也可被 new FormData(form) 收集。禁用字段仍不提交；没有 name 的输入即使关联正确，也不会产生普通名称和值数据。
<fieldset form="profile"> 只关联字段集自身，内部输入不能依赖它自动继承表单归属。若这些输入位于目标表单外，要分别给它们写 form。在布局中可以使用 CSS 调整视觉位置，但不要把表单归属假定成普通 DOM 祖先继承属性。
固定在页面底部的“保存”按钮可以放在 <form> 标签外，但用 form="editor" 指向表单 ID 后，它仍是该表单的提交者。若按钮写了 name 和 value，提交时也可能带上这组键值。反过来，表单内部的控件若 form 指向别的表单，它的归属就不再由 DOM 包裹关系决定。调试 FormData 漏字段时，先检查每个控件的 form 归属、name 与禁用状态，不要只数标签嵌套。
这个关联只作用于写了 form 属性的那个控件，不会像 DOM 包裹那样让它下面所有输入自动归属目标表单。若固定操作栏里有两个按钮，两个都要各自指向同一个表单 ID。ID 拼错时按钮看起来还能点击，却不会按预期提交正文表单；检查 button.form 可以直接确认它实际归属哪个表单。组件重构时改了表单 ID，也要同步更新外部控件的引用。
容易答错的地方
- 把
form值写成表单的name - 这里需要匹配目标
<form>的id，不是任意显示名。 - 给外部字段集写一次
form就认为后代都提交 - 字段集的关联不自动传给子控件；外部输入需要各自关联。
面试官还会怎么问？
表单外的按钮会参与约束校验吗？
作为关联表单的提交按钮时，会启动该表单的正常提交与校验流程。
new FormData(form) 会收集外部输入吗？
会收集真正关联该表单、具名且可提交的成功控件。
外部输入没有 name 会怎样？
仍可获得表单归属和交互，但普通表单数据中没有它的名称和值项。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。