一个可用的注册页面必须包含type="text"（用户名）、type="email"（邮箱）、type="password"（密码及确认密码）三类input，且需正确绑定label、使用POST提交、前端JS校验密码一致性并配合服务端二次验证。
注册页面必须包含哪些 <input> 类型
一个可用的注册页面至少要覆盖用户身份识别和基础验证需求，type="email"、type="password"、type="text"（用户名）是核心。别用 type="string"——HTML 没这玩意儿，浏览器会当成 type="text" 回退，但语义丢失，移动端键盘也不会自动切为邮箱/密码布局。
常见错误：把密码框写成 <input type="text" name="password">，明文暴露；或漏掉 required 导致空提交。真实场景中，邮箱需配合 pattern 或后端二次校验，因为 type="email" 仅检查格式（如 a@b.c 就算通过）。
-
username：用type="text"，加minlength="3"防止过短昵称 -
email：必须type="email"+required，否则 iOS 键盘不弹出 @ 符号键 -
password和confirm_password：两个type="password"，且后者需 JS 对比值，pattern无法跨字段约束
为什么 <form> 的 method 和 action 不能乱设
前端注册页若直接提交到 action="/register" 且 method="GET"，密码就会暴露在 URL 和服务器日志里——这是硬性安全红线。必须用 method="POST"，并确保后端接口能接收 POST 数据（比如 Express 中要配 express.urlencoded()）。
另一个坑：本地开发时写 action="register.php" 却没搭 PHP 环境，表单一提交就 404；或者写成 action="./api/register" 但没配代理，跨域失败。更稳妥的做法是先设 action="#"，用 JS 拦截提交、调 fetch() 发请求，把控制权拿回来。
立即学习“前端免费学习笔记（深入）”；
- 调试阶段建议
action="#" onsubmit="return false"，避免意外跳转 - 生产环境
action必须指向真实可写的后端路由，不能是静态 HTML 路径 - 如果用前端框架（如 Vue），通常直接弃用原生
<form>提交，改用event.preventDefault()+fetch
<label> 不只是摆设，不绑定会触发 accessibility 报错
很多人写 <input id="email"><span>邮箱</span>，以为视觉对齐就行。但屏幕阅读器无法把“邮箱”文字和输入框关联，WCAG 2.1 直接标为 A 级失败。正确做法是用 for 属性或包裹结构：
<label for="email">邮箱</label> <input type="email" id="email" name="email"> <label> 用户名 <input type="text" name="username"> </label>
注意：id 值必须和 for 完全一致，大小写敏感；name 属性决定后端收到的字段名，和 id 可不同，但别搞混。
- 没
id的<input>无法被<label for>绑定 - 多个同名
name（如多选兴趣）会以数组形式提交，单个文本框则必须唯一name - 移动端点击无
<label>包裹的提示文字，触控热区小，易误操作
密码确认逻辑不能只靠 HTML5 pattern
pattern 只能校验单个字段是否符合正则，比如 pattern="(?=.*\d)(?=.*[a-z]).{8,}" 检查密码强度，但它无法判断「确认密码」是否和「密码」一致。这个对比必须由 JavaScript 完成，否则用户输错两次不同密码也能提交成功。
典型错误是监听 blur 后只改样式（比如加红框），却不阻止表单提交。正确姿势是在 form.onsubmit 里做最终校验：
document.querySelector('form').onsubmit = function(e) {
const pwd = document.getElementById('password').value;
const confirm = document.getElementById('confirm_password').value;
if (pwd !== confirm) {
e.preventDefault();
alert('两次输入的密码不一致');
}
};
- 服务端必须再次校验密码一致性——前端 JS 可被禁用或绕过
- 不要用
type="password"的value属性做初始值（如value="123"），会明文显示 - 密码字段禁止加
autocomplete="on"，现代浏览器会警告甚至屏蔽
alert 不告诉用户哪一栏错了，或者后端返回 { success: false, message: "注册失败" } 这种信息，根本没法 debug。字段级错误信息、HTTP 状态码、以及是否需要重置表单，这些细节才真正决定注册页能不能用。 
