name属性是表单控件提交的唯一标识，无name的控件不会被浏览器提交；同名控件按DOM顺序生成多个key=value对；value决定实际提交值；form属性可使按钮关联指定表单提交。
name 属性是键的唯一决定者
没有 name 的表单控件，无论有没有内容、是否被用户修改过，都不会出现在提交数据里——浏览器压根不打包它。这不是后端漏收，是前端根本没发。
常见错误包括：
– 给 <input type="checkbox"> 加了 id 或 class 却忘了 name，结果勾选了也没数据；
– 在 JS 动态插入的 <input> 中漏设 name，导致表单看起来完整，实际缺字段；
– 误以为 id="username" 能替代 name="username"，但服务端按 name 解析，id 对提交零影响。
所有可提交控件（input、select、textarea）都必须显式声明 name，且值推荐只用字母、数字、下划线、中划线，避免方括号（如 user[age]）——那是后端框架的解析约定，不是 HTML 标准行为。
同名控件如何生成多个值
多个控件共用一个 name，浏览器不会合并或覆盖，而是按 DOM 顺序拼成多个 key=value 对，用 & 连接。比如三个勾选的复选框：
立即学习“前端免费学习笔记（深入）”；
<input type="checkbox" name="tag" value="js"> <input type="checkbox" name="tag" value="html"> <input type="checkbox" name="tag" value="css">
提交后 URL 查询字符串会是：tag=js&tag=html&tag=css，不是 tag=js,html,css，也不是 JSON 数组。
这意味着：
– 后端必须能处理重复键名（如 Python 的 request.args.getlist("tag")，Node.js 的 querystring.parse() 默认保留数组）；
– 单选按钮（type="radio"）也靠 name 分组，但只提交一个 value，因为同组内最多一个被选中；
– <select multiple> 同理，每个选中项单独发一个 name=value。
value 属性决定“值”的来源，而非显示内容
value 是提交时实际发出的字符串，和用户看到的文本可能完全不同。例如：
- 文本框、密码框：提交的是用户当前输入的字符串，
value属性只设默认值，填完后以输入内容为准； - 复选框、单选按钮、
<option>：它们的value是硬编码的标识符，用户看不到，但提交的就是它——哪怕界面上显示“男”，真实发出去的可能是gender=male； - 隐藏域（
type="hidden"）：不显示，但只要有name和value，就一定会提交，常用于传 token、来源页 ID 等上下文。
注意：type="number" 的 value 仍是字符串类型，且允许为空；type="file" 的 value 是文件名（非路径），真正上传的是二进制流，需搭配 enctype="multipart/form-data" 才生效。
form 属性让按钮脱离父表单也能提交
按钮本身不在 <form> 内，却要提交某个表单，就得用 form 属性指向目标 form 的 id：
<form id="login-form" action="/login"> <input name="user"> </form> <button type="submit" form="login-form">登录</button>
关键点：
– form 值必须严格匹配页面中某个 form 元素的 id，大小写、连字符都不能错；
– 只有 <button type="submit">、<input type="submit">、<input type="image"> 支持该属性；
– 按钮若已处于某个 form 内部，form 属性会被忽略；
– 提交时只采集目标 form 内的控件，按钮自身位置完全无关。
这个机制容易被忽略的坑是：控制台不报错，但点击无反应——大概率是 form="xxx" 对应的 id="xxx" 不存在或拼写不一致。
