纯html表单可用且可验证，关键在正确设置name、id、for和type：name决定后端接收键名与单选/复选逻辑；for与id配对确保label可点击及无障碍支持；type触发原生校验与适配软键盘；提交失败多因form结构错误、button类型缺失或js误阻提交。
直接说结论：不需要框架、不依赖 JS，纯 HTML 就能做出可用、可验证、语义清晰的表单——但必须写对 name、id、for 和 type 这四个关键属性，否则浏览器校验失效、后端收不到数据、屏幕阅读器无法识别。
为什么 name 属性不能省，也不能乱起名
后端接收数据靠的是 name，不是 id 或显示文字。比如用户填了邮箱，PHP 的 $_POST['email']、Python 的 request.form.get('email') 都在找这个键名。
- 同一组单选按钮（
type="radio"）必须共用一个name，比如name="gender"，否则无法互斥选择 - 多个复选框（
type="checkbox"）如果想让后端收到数组，name末尾加[]，如name="hobby[]"（PHP 场景下有效） - 避免空格、中文、特殊符号，只用字母、数字、下划线，比如
user_name可以，用户名或user name会出问题
label 和 for 配合 id 才真正生效
很多人写了 <label>邮箱</label><input type="email">，看起来能点，但这是“碰巧能用”，不是标准做法。真正的关联必须靠 for 和 id 匹配。
-
<label for="email">邮箱</label><input type="email" id="email" name="email">—— 点击文字焦点才进输入框，且无障碍工具能读出来 - 漏掉
id或for值不一致，等于没写label，移动端点击区域变小，视障用户无法操作 - 不用
for/id的替代写法是把input套进label里：<label>同意条款<input type="checkbox" name="agree"></label>，但仅限简单场景
type 决定校验行为和键盘类型，别全用 text
用错 type 不仅失去浏览器原生校验，还会在手机上弹出不匹配的软键盘（比如密码字段弹出全键盘）。
-
type="email"：自动检查是否含@和域名结构；iOS/Android 弹出带@和.的邮箱键盘 -
type="tel"：不自动校验格式，但弹出数字键盘；如需更严校验，配合pattern，例如pattern="[0-9]{11}" -
type="number"：限制只能输数字，支持min/max；但注意它返回的是字符串，不是数字类型 -
type="password"和type="text"渲染一样，但前者内容不可见、不被浏览器自动填充（除非显式允许）
提交前校验失败却仍能发出去？检查这三点
加了 required 却还能空着提交，大概率是以下某个环节断了链：
- 表单没包在
<form></form>标签里，或者<form></form>被意外闭合（比如嵌套了未闭合的<div>） <li>用了 <code><button></button>但没写type="submit"，默认是type="button"，不触发表单提交 - 有 JS 绑定了
onsubmit并写了return false或调用了event.preventDefault()，但没做手动校验就放行
最简验证闭环就是：HTML 层用 required、type、pattern 拦第一道，JS 层只在需要复杂逻辑（比如两次密码比对）时介入——别本末倒置。
