form属性必须匹配目标form元素的id而非name或class，大小写及符号均敏感；支持多数input类型（除type="image"），但需有name属性且不能disabled；button跨表单提交须同时设form和type="submit"。

input form 属性必须匹配目标

的 id，不是 name 或 class

写 form="login" 时，浏览器只认 <form id="login"></form>，哪怕页面里有 <form name="login"></form> 也完全无效。大小写、连字符、下划线全部敏感——form="LoginForm" 对应 <form id="loginform"></form> 就会断开关联。

常见错误现象：<input name="email" form="user-form"> 却找不到 <form id="user-form"></form>，而是写了 id="userForm" 或 name="user-form"；或者页面中存在多个相同 id="user-form"，导致只绑定第一个，其余控件提交时被忽略。

验证方法：打开 DevTools 控制台，执行 document.getElementById("user-form").elements，检查返回的集合里是否包含你用 form 关联进来的 <input>。

哪些 input 类型支持 form 属性？type="image" 和 disabled 状态要特别注意

<input> 元素基本都支持 form 属性，但 type="image" 是明确例外，写了也无效。其他如 text、email、hidden、checkbox、radio 都可以。

关键前提是：控件必须有 name 属性，否则即使加了 form，也不会出现在 FormData 中，后端收不到字段。

禁用状态（disabled）的控件，无论是否用 form 关联，都不会提交；只读（readonly）则照常提交。

无序列表说明：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• <input type="hidden" name="token" form="main"> 是合法且高频用法，常用于模态框中携带 CSRF token
• <input type="radio" name="plan" value="pro" form="checkout"> 可以把选项按钮放在侧边栏，仍归属主表单
• <input type="image" src="submit.png" form="search"> → 不会提交，浏览器直接忽略 form 属性

button[type="submit"] 跨表单提交时，form 属性和 type 缺一不可

外部按钮要触发指定表单提交，光写 form="target-id" 不够，还必须带 type="submit"。否则它就是一个普通按钮，点击毫无反应。

示例对比：

搜一下 这个不会提交

性能与兼容性影响：该机制是纯 HTML 行为，零 JS 开销；但 IE9 及更早版本完全不识别，需降级为 document.getElementById("search-form").submit() 手动调用。

一个按钮只能关联一个表单：form="form1 form2" 是非法写法，空格分隔会被当做一个错误 ID 处理，浏览器静默失败。

form 属性和 label for 完全无关，但可共存

form 解决的是“数据归属”，for 解决的是“语义聚焦”。二者职责分离，互不干扰。

比如：<label for="user-email">邮箱</label><input id="user-email" name="email" form="login-form"> —— 这样既保证点击文字能聚焦输入框，又确保该输入框的数据在 login-form 提交时被带上。

容易被忽略的点：DOM 结构松散时，开发者容易误以为加了 form 就解决了可访问性问题。其实不然。for 缺失会导致屏幕阅读器无法识别控件语义、键盘 Tab 顺序错乱、点击失效——这些跟 form 属性是否存在毫无关系。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！