name属性是表单字段提交至后端的唯一标识，缺之则该字段数据完全丢失；同名控件按类型决定提交逻辑（单选取其一、多选/多选下拉传多个值、文本覆盖隐藏域），按钮name用于区分操作指令，命名须严格匹配后端接收字段名。
name 属性不是“可选配置”，而是表单数据能抵达后端的**唯一通行证**。没它，用户填再满、JS 改再多，提交时该字段直接消失。
为什么提交后端收不到某个字段？
最常见原因就是漏写了 name。浏览器只打包带 name 的控件——哪怕 id="email"、class="required" 都写全了，只要没 name="email"，后端 req.body.email 或 $_POST['email'] 就是 undefined 或空。
-
<input type="text" id="email">→ 提交无此字段 -
<input type="text" name="email" id="email">→ 正常提交email=xxx - 动态创建的控件（如 JS 插入的
<textarea>）必须显式设置name，否则不参与提交
同名控件怎么处理？看类型，不是看顺序
多个控件共用一个 name 是合法且常用的设计，但后端收到的数据形态完全取决于控件类型：
-
<input type="radio" name="theme" value="dark">+<input type="radio" name="theme" value="light">→ 只提交被选中的那个值（theme=dark） -
<input type="checkbox" name="hobby" value="reading">+<input type="checkbox" name="hobby" value="coding">→ 勾两个就发hobby=reading&hobby=coding，后端需按多值逻辑接收（如 PHP 的$_POST['hobby']是数组） -
<select multiple name="tag">→ 选中多个项时也生成多个同名键值对，但需后端识别name="tag[]"才能自动转成数组（Express 默认不解析[]，得配中间件） -
<input type="hidden" name="step" value="2">和<input type="text" name="step" value="3">同名 → 文本框的值会覆盖 hidden 的值，最终提交step=3（按 HTML 出现顺序，后者生效）
按钮的 name 不是装饰，是操作指令
type="submit" 或 type="image" 的按钮，其 name 和 value 会作为键值对一并提交。这是区分“保存”“删除”“导出”的最轻量方式：
立即学习“前端免费学习笔记（深入）”；
-
<button type="submit" name="action" value="save">保存</button>→ 提交含action=save -
<button type="submit" name="action" value="delete">删除</button>→ 提交含action=delete - 漏掉
name，后端就收不到action字段；拼错name="aciton"，后端取req.body.action就是undefined -
type="button"完全不参与提交，别指望它传任何东西
name 命名的硬约束和兼容性坑
看似随便起个名字就行，但后端框架对 name 值的解析有实际限制：
- 避免空格：
name="user name"在多数后端中会被截断或静默丢弃 - 慎用点号：
name="user.email"在 Express 中默认不支持，PHP 虽能接但某些安全配置下会过滤 - 方括号不是语法糖：
name="user[address][city]"只有 Laravel/Rails 等明确支持嵌套解析的框架才认；Django/Express 需额外处理 - 推荐方案：小写字母 + 下划线，如
name="profile_image_url"，前后端统一用这个字符串取值
最容易被忽略的一点：前后端字段名必须**字面完全一致**——大小写、下划线位置、有无前缀，差一个字符，数据就进不了业务逻辑。
