form属性可将表单控件关联到任意form元素，需满足：控件支持该属性（如input、button、select等）、form值严格匹配目标form的id、浏览器≥IE10。
直接用 form 属性就能把表单控件“拽”进目标 <form>，无需挪动 DOM 位置。但必须满足三个硬条件：控件本身支持该属性、form 值精确匹配目标 form 的 id、浏览器版本 ≥ IE10。
哪些元素能用 form 属性
不是所有表单控件都支持 form 属性。只有明确在 HTML5 规范中列出的可提交控件才有效，包括：<input>（除 type="image" 外）、<button>（type="submit" 或 "reset"）、<select>、<textarea>、<output>（仅作输出，不提交）。<label>、<fieldset>、<legend> 等分组或语义元素不支持该属性，写了也无效。
常见错误现象：<label form="myform"> 看似合理，但浏览器完全忽略；<input type="hidden" form="myform"> 是合法且常用的做法。
form 属性值必须严格匹配 id，不能是 name 或 class
form 属性只认 <form id="xxx"> 中的 id 值，大小写、连字符、下划线全部敏感。它和 <label for="xxx"> 的匹配逻辑一致，但作用对象不同。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
form="loginForm"对应<form id="loginform">→ 失败（大小写不一致） -
form="login-form"对应<form name="login-form">→ 失败（用了name而非id） -
form="form1 form2"→ 失败（不支持多值，空格分隔会被当做一个非法 ID） - 页面存在多个相同
id="login-form"→ 行为不可预测，通常只关联第一个
按钮跨表单提交时，type="submit" 是前提
外部 <button> 要触发某个表单提交，光写 form="target-id" 不够，还必须显式声明 type="submit"。否则它就是一个普通按钮，点击无任何提交行为。
示例：
<form id="search-form" action="/search"> <input name="q"> </form> <button type="submit" form="search-form">搜一下</button> <button form="search-form">这个不会提交</button>
性能 / 兼容性影响：该机制纯 HTML 驱动，零 JS 开销；但 IE9 及更早版本完全不识别 form 属性，需降级为 document.getElementById('search-form').submit() 手动触发。
form 属性与可访问性标签（label）互不干扰
form 解决的是「数据归属」问题，label 解决的是「语义关联与聚焦」问题，二者职责分离，可以共存。一个外部 <input form="main"> 仍需配 <label for="xxx"> 才算完整。
容易被忽略的地方：视觉上把输入框和 label 拆开后，开发者常误以为“反正不在同一个 form 里，label 就不用管了”，结果导致屏幕阅读器读不出字段含义、键盘 Tab 顺序断裂、点击 label 无法聚焦——这些和 form 属性无关，但会一起暴露出来。别让 DOM 结构松散，掩盖了可访问性缺失的本质。
