form属性必须严格匹配form元素的id，大小写和符号敏感，仅button[type=submit/reset]和input[type=submit/reset/image]能触发表单行为，验证需用DOM API检查elements集合。
form 属性必须匹配 form 元素的 id，不是 name 或 class
写 form="login" 时，浏览器只认 <form id="login">，哪怕页面里有 <form name="login"> 也完全无效。大小写、连字符、下划线全部敏感——form="LoginForm" 对应 <form id="loginform"> 就会静默失效。
常见错误包括：
-
<input name="email" form="user-form">却找不到<form id="user-form">，实际写了id="userForm"或name="user-form" - 页面中存在多个相同
id="user-form"，浏览器只绑定第一个，其余控件提交时被忽略 - 用 JS 动态插入
<form id="xxx">后再渲染带form="xxx"的控件——DOM 中无目标表单，绑定即失效
button 跨表单提交必须同时设 form 和 type="submit"
<button form="search-form">搜一下</button> 点击毫无反应；只有加上 type="submit" 才真正触发提交。
支持 form 属性并能触发表单行为的控件仅限：
立即学习“前端免费学习笔记（深入）”；
-
<button type="submit">或<button type="reset"> -
<input type="submit">或<input type="reset"> -
<input type="image">（但该类型不支持form属性，写了也无效）
<input type="text">、<select>、<textarea> 等输入控件虽支持 form 属性（决定归属），但它们本身不会触发提交——提交动作必须由上述三类按钮或 input 承担。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
验证 form 关联是否生效的实操方法
别靠猜，直接在 DevTools 控制台执行：
document.getElementById("target-form-id").elements
看返回的集合里有没有你用 form="target-form-id" 关联进来的控件。如果没出现，说明绑定失败。
进一步确认提交数据是否包含该字段：
- 给控件加
name属性（没有name就不会出现在 FormData 中） - 监听表单
submit事件：form.addEventListener('submit', e => console.log(new FormData(e.target))) - 检查输出对象中 key 是否存在、value 是否正确
- 注意：
disabled的控件无论是否关联，都不会提交；readonly则照常提交
混用嵌套和 form 属性时的真实风险
一个按钮既在某个 <form> 内部，又设置了 form="anotherForm"，浏览器以 form 属性为准——但旧 JS 逻辑或第三方验证插件仍可能按 DOM 树向上找，导致：
- 提交了错误表单（比如点了“删除用户”，却清空了搜索框）
- required 验证没触发（插件只检查父级
form下的元素） -
reset()清空了不该清空的字段
更隐蔽的问题是：jQuery 里 $('button').closest('form') 在这种场景下返回 null，而原生 button.form 才指向真实目标。服务端永远不能只信前端传来的字段分组，必须做独立校验。
