name属性决定http请求体中的键名，浏览器仅提交带name的表单元素，radio/checkbox依赖同名分组，name与id功能分离，button的name和value也参与提交。
name属性决定HTTP请求体里的键名
表单提交时，浏览器只打包所有带name属性的可提交元素（<input>、<select></select>、<textarea></textarea>、<button type="submit"></button>），按name=value拼成字符串，如username=alice&hobby=reading。没写name的控件，哪怕填了内容、有id、有value，也完全不出现在请求里。
常见错误现象：
- PHP中
$_POST为空，但表单明明填了——八成是某个<input>漏了name - Django中
form.is_valid()始终为False，form.errors提示字段缺失——检查HTML里name是否和forms.py中字段名完全一致 - JS用
document.querySelector('input')能取到元素，但后端收不到值——id或class不能替代name
radio和checkbox靠同名分组，不是靠class或id
name在这里是逻辑分组的唯一依据。浏览器不看id、不看class、不看位置，只认name值是否相同。
使用场景与参数差异：
-
<input type="radio" name="gender" value="male">和<input type="radio" name="gender" value="female">→ 同组互斥，最终只提交一个gender=xxx -
<input type="checkbox" name="hobby" value="reading">和<input type="checkbox" name="hobby" value="coding">→ 同名则多选合并，全不选时该name直接从请求中消失 - 想让后端接收为数组？加
[]后缀：name="hobby[]"→ 提交为hobby[]=reading&hobby[]=coding，但得确认后端框架是否原生支持（Laravel行，Express默认不行）
name和id完全无关，混用会踩坑
id用于DOM定位（document.getElementById()、<label for="xxx"></label>）、CSS样式；name专用于表单数据提交。两者可以一样，也可以不同，但功能绝不交叉。
容易踩的坑：
- 给
<input id="username">却忘了写name→ 前端看着正常，后端收不到username - 动态生成表单时只设
id，没显式赋name→ JS能操作，提交时字段蒸发 - 误以为
name="user.name"或name="user name"只是“写法不同” → PHP可能静默丢弃，Go解析库报错，Django直接绑定失败
安全且通用的命名：用下划线user_name、驼峰userName、短横线user-name（注意部分老框架对短横线支持弱）。
button的name值参与提交，不只是装饰
<button type="submit"></button>的name和value会被一起发到后端，成为request.POST或$_POST里的一个键值对。
实操建议：
- 多个提交按钮共享
name（如name="action"），靠不同value区分意图：value="save"、value="preview"→ 后端通过if request.POST.get('action') == 'save'分支处理 - 不要依赖
button的文本内容判断行为——它不发出去；只有value和name进请求体 - 如果按钮没设
name，只设value，那这个value不会出现在提交数据中
name值在表单通信链路里贯穿始终：前端渲染 → 用户交互 → 浏览器序列化 → HTTP传输 → 后端解析。任何一环缺了它，数据就断在半路。最隐蔽的问题往往不是语法错，而是那个被忽略的、空着的name=""。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
