form属性使按钮逻辑归属表单而非DOM嵌套，需id严格匹配、type为submit且控件有name才能提交；disabled控件不提交，readonly照常；JavaScript中用button.form而非closest('form')获取关联表单。
form 属性不是“把按钮挪进表单”，而是让浏览器在提交时逻辑上认定它属于某个表单——只要 id 匹配、类型正确、目标 form 存在，就能跨 DOM 层级触发原生提交行为。否则就是静默失败，连控制台错误都不会有。
button 的 form 属性必须搭配 type="submit"
只写 form="target-id" 不够，type 必须是 submit 或显式声明。否则点击无任何反应。
-
<button form="search-form">搜</button>→ 无效，type 默认是button -
<button type="submit" form="search-form">搜</button>→ 正确，会提交id="search-form"的表单 -
<input type="submit" form="search-form" value="搜">→ 同样有效，但语义不如<button>清晰
form 属性值必须严格匹配目标 form 的 id
大小写、连字符、下划线全部敏感，且只认 id，不认 name 或 class。拼错一个字符，就等于没写。
-
form="loginForm"对应<form id="LoginForm">→ 失败（大小写不一致） -
form="user-form"对应<form name="user-form">→ 失败（用了 name） -
form="main-form"但页面中存在两个id="main-form"→ 行为未定义，通常只关联第一个 - 验证方式：
document.querySelector('button[form]').form应返回对应<form>元素，否则说明匹配失败
input/select/textarea 等控件用 form 属性时，name 是硬性前提
即使 form="xxx" 写对了，如果控件没设 name，它就不会出现在提交数据里——FormData 里根本看不到这个字段。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
-
<input type="email" form="user-form">→ 提交时不会包含该字段 -
<input type="email" name="email" form="user-form">→ 正确，会被序列化进表单数据 -
disabled控件无论是否带form属性，一律不提交；readonly则照常提交 - 可通过
document.getElementById("user-form").elements检查该集合里是否包含你的外置控件
JavaScript 中别用 closest('form') 找表单
旧习惯用 button.closest('form') 获取所属表单，在 form 属性场景下会返回 null——因为按钮可能根本不在任何 <form> 内部。
- 正确方式：
button.form直接返回关联的<form>元素（原生属性，无需 DOM 遍历） - jQuery 用户注意：
$('button').closest('form')在此场景下不可靠，必须改用document.querySelector(`form[id="${btn.form.id}"]`) - 监听
submit事件时，event.submitter能准确指向触发按钮（Safari 15.4+），旧版需靠data-submit-type+ click 事件手动标记
最容易被忽略的是：form 属性只影响浏览器原生行为，服务端永远不能信任前端传来的表单归属逻辑——必须按字段名做校验，不能只靠 form id 做路由或权限判断。
