注册表单需用标签，设置 method=”post” 和有效 action 属性，并为每个添加 name 属性；密码需双字段比对，邮箱用 type=”email”、手机号用 type=”tel” 加 pattern 校验；提交按钮用 type=”submit” 并禁用防重复，前端校验仅为辅助，后端必须严格验证。
怎么用 <form></form> 搭出能提交的 注册表 单
注册表单不是把几个 <input> 堆一起就行，关键得让浏览器知道“这是要发给后端的注册动作”。必须指定 method 和 action，否则点提交没反应，或者被当成 GET 请求乱传参数。
-
method="POST"是默认且推荐的——注册涉及密码、邮箱等敏感信息，GET会把数据拼在 URL 里，不安全也不符合语义 -
action必须填真实接收地址，比如action="/api/register"；开发阶段可先设为action="#"验证前端结构，但别忘了改回来 - 别漏掉
name属性：<input name="username">才能在提交时生成username=xxx键值对；没name的字段根本不会发出去
密码和确认密码怎么防用户输错
纯靠 JS 校验容易绕过，但至少得在前端拦住明显错误，减少无效请求。重点不是“弹窗提醒”，而是用原生约束 + 合理反馈。
- 两个
<input type="password">字段，第二个加id="confirm-password"，方便 JS 对比 - 用
required和minlength="8"做基础限制，但别只信这个——后端必须重新校验 - 对比逻辑写在
submit事件里，而不是按钮onclick：防止用户右键菜单提交或回车跳过 - 示例对比代码：
form.addEventListener('submit', e => { if (pwd.value !== confirmPwd.value) {e.preventDefault(); alert('两次输入的密码不一致'); } });
邮箱、手机号这些字段怎么避免格式错得离谱
正则太重，原生 type 属性就能挡住大部分低级错误，关键是选对类型并配合 pattern 补充规则。
-
<input type="email">会自动校验基本邮箱格式（如含 @ 和 .），但不保证域名真实存在 - 手机号别用
type="number"——它允许科学计数法、会删前导零、移动端唤起数字键盘但缺符号键；改用type="tel"更合适 - 如果需要更严（比如国内 11 位）：
pattern="^1[3-9]d{9}$"，同时加title=" 请输入正确的 11 位手机号 "，提示会自然出现在验证失败时 - 注意：
pattern只在提交时触发，且必须匹配整个字符串（隐式加 ^$），别漏了首尾锚点
提交按钮点击后变灰防重复提交有用吗
有用，但只是前端一层薄防护。用户禁用 JS 或刷新页面后依然能重发，真正防重靠后端幂等设计。不过前端卡一下体验好很多。
立即学习 “ 前端免费学习笔记（深入）”；
- 按钮加
type="submit"，别写成type="button"再手动fetch——那样会绕过表单原生校验（比如required） - JS 中监听
submit事件，在发送请求前设button.disabled = true，请求结束再恢复；别用click事件——可能抢不到提交时机 - 恢复按钮状态时别只靠
finally：网络超时或 500 错误后，用户需要明确知道“失败了”，建议成功才启用，失败留着灰态并显示错误提示
表单最麻烦的从来不是写 HTML，而是每个字段背后都连着一串假设：用户会按提示输、浏览器支持这个属性、后端接口字段名真和你写的 name 一致、移动端软键盘不会遮住输入框……少对一个，就卡在某个用户手机上。
