表单能正常工作的核心是name、type、label、action四要素必须正确：name决定数据是否提交，type匹配语义并触发原生能力，label正确关联提升可访问性，action和method明确提交目标与方式。
表单不是写完就能用的，用户一提交就丢数据、输错格式没提示、移动端键盘弹错——这些问题基本都出在设计阶段没想清楚“怎么让浏览器和用户协同工作”。核心就一条：name 属性必须有，type 必须匹配语义，label 必须正确关联，其余都是锦上添花。
为什么表单提交后后端收不到字段
最常见原因是漏掉 name 属性。浏览器只把带 name 的控件数据发出去，id、class、甚至 JS 绑定的值都不算数。
-
<input type="text" id="email">→ 后端完全收不到这个字段 -
<input type="text" name="email" id="email">→ 正常提交，键名为email - 复选框/单选按钮靠
name分组：多个<input type="checkbox" name="hobby">才能一起提交成数组 - 隐藏域也要有
name：<input type="hidden" name="csrf_token" value="abc123">
type 属性选错，等于放弃浏览器原生能力
type 不只是换图标，它直接决定输入规则、软键盘类型、是否触发校验。用错就等于手动给自己加活。
-
type="email"会检查@符号，iOS 弹邮箱键盘；type="text"写邮箱？零校验、全键盘、无障碍支持差 -
type="tel"在 iOS 上弹数字键盘，Android 弹拨号盘，但不强制校验格式（别指望它拦住 “123”） -
type="number"允许上下箭头，但允许粘贴字母（需配合pattern或 JS 拦截） -
type="password"必须用，别用type="text"+ JS 掩码 —— 不安全、绕过密码管理器、无障碍失效
label 不关联 input，等于废掉可访问性和点击体验
不写 label 或写错 for，用户无法点击文字聚焦输入框，屏幕阅读器读不出字段含义，移动端点不准。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
<label for="username">用户名</label><input type="text" id="username" name="username"> -
for值必须和对应input的id完全一致（大小写敏感） - 嵌套写法可行但限制多：
<label>用户名<input type="text" name="username"></label>，不适用于select或textarea - 没
label的表单，在 WCAG 和多数企业合规检查中直接不通过
action 和 method 留空或乱设，会让提交行为失控
这两个不是“可填可不填”的装饰属性，它们定义了表单最基础的通信意图。
- 没写
method→ 默认GET，所有字段拼在 URL 后，敏感数据暴露、长度受限 - 没写
action→ 提交到当前 URL，SPA 里容易整页刷新，打断用户体验 -
action=""或action="#"等价于当前路径，和没写一样危险 - 前后端接口路径必须提前对齐，比如后端是
/api/v1/register，前端action就得写死或由模板变量注入，不能靠 JS 临时拼
真正卡住开发进度的，往往不是“怎么实现”，而是“为什么浏览器不按预期走”——而绝大多数时候，问题就藏在 name、type、label、action 这四个地方，少一个，协作链就断一环。
