HTML5 的 form 属性通过匹配控件的 form 值与表单的 id，将控件绑定到同页任意位置的表单；需确保大小写和符号完全一致，且不能跨 iframe 或跨域。
form 属性怎么绑定控件到外部表单？
HTML5 的 form 属性允许你把一个表单控件（比如 <input> 或 <button type="submit"></button>）“认领”进页面中任意位置的 <form></form>，只要两者 id 匹配。这解决了浮动面板、模态框、侧边栏里放输入框却无法提交的问题。
常见错误是 id 大小写或下划线不一致：比如 <form id="edit-form"></form> 和 <input form="Edit-Form"> 就不会关联——浏览器静默失败，不报错也不提交。
-
form属性只能指向同页面内已存在的<form></form>，不能跨 iframe 或跨域 - 多个控件可以共用同一个
form="xxx"，它们会一起提交到该表单的action和method - 按钮上同时写
form和formaction，后者会覆盖表单默认的action，但不改变其他控件的归属
多个独立表单怎么避免 DOM 结构冲突？
别在表格行里写 <form></form>，也别把 <form></form> 塞进 <tr> 或 <code><td>。浏览器会自动把它“修复”出表格结构，导致控件脱离上下文，提交时 FormData 为空。
<p>典型症状：Chrome DevTools 里能看到 <code><input>，但 new FormData(form) 里没有它；或者点击按钮完全没反应。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：每个逻辑独立的提交单元（如每行编辑、每个模态框）单独配一个
<form id="form-123"></form>，放在页面顶部、底部或隐藏容器里 - 对应控件统一加
form="form-123"，哪怕它们散落在不同<div> 或 <code><aside></aside>里 - IE 不支持
form属性，如需兼容，得用 JavaScript 手动收集数据并 fetch - 检查 DOM：右键「检查元素」，确认按钮是否真在
<form>...</form>之间 - 用
document.querySelector('button[type="submit"]').form在控制台查它是否关联到有效表单对象（返回null就是没绑上） - 不要依赖视觉位置判断逻辑归属，只看 HTML 层级和
form属性值 -
formtarget="_blank"是导航行为，不是后台提交；别指望它“悄悄发完就回来” - Safari 15.4 之前不支持
event.submitter，JS 里无法准确识别哪个按钮触发了提交 - 对屏幕阅读器用户，记得加
aria-label="在新标签页打开预览"，否则新开窗口意图不明确
submit 按钮脱离表单后为什么没反应？
一个 <button type="submit"></button> 必须处于某个 <form></form> 的作用域内，否则点击就是个普通按钮——不会触发 submit 事件，也不会序列化任何字段。
最常踩的坑是提前闭合了 <form></form> 标签，比如：<form action="api.php"></form>
<input name="email"><button type="submit">发送</button>。此时 <input> 和 <button></button> 都在表单外，等于白写。
跨表单提交时 formtarget="_blank" 为什么看不到响应？
设了 formtarget="_blank" 又配了跨域 formaction="https://third-party.com/preview"，页面确实跳转了，但空白一片——这不是代码问题，是浏览器策略：跨域窗口无法读取响应体内容，连 HTTP 状态码都拿不到。
如果你真需要预览第三方服务结果，后端必须做一层中转：返回 302 跳转到你自己的同域页面（比如 /preview?token=abc），再由这个页面加载第三方内容。
真正难处理的不是语法，而是 DOM 归属关系看不见摸不着——浏览器不报错，只默默丢掉数据。调试时优先验证 button.form 是否为有效对象，再查 form.elements 里有没有你预期的控件。
