表单必须用包裹才能触发提交，action和method属性不可少，input需有name且按钮用type="submit"，autocomplete要正确设置，JS校验不可替代后端验证，应禁用重复提交并统一处理错误提示。
表单必须用 <form></form> 包裹，否则按回车或点击提交不会触发任何行为
浏览器只对 <form></form> 内的 <input type="submit"> 或回车事件做默认提交处理。单独放一个 <button></button> 或 <div> 模拟登录按钮，不包在 <code><form></form> 里，点击后页面什么都不会发生——连 JS 监听都收不到原生 submit 事件。
常见错误现象：Uncaught TypeError: form.submit is not a function（误把 form 当成函数调用），或点击没反应、回车无响应。
- 必须写
<form action="/login" method="POST"></form>，action指向后端接口地址，method推荐用POST（避免密码出现在 URL 或历史记录中） -
<input type="text">和<input type="password">必须有name属性，如name="username"和name="password"，否则提交时字段不会被发送 - 不要用
type="button"做提交按钮；用<button type="submit"></button>或<input type="submit">
autocomplete 属性不是可有可无的装饰，它直接影响密码域能否被浏览器正确识别和填充
很多登录页输完用户名点密码框，浏览器不弹密码建议，甚至记不住这次登录——大概率是 <input> 缺少或写错了 autocomplete 值。
使用场景：用户频繁在多个设备/浏览器间切换登录，依赖自动填充功能提升体验。
立即学习“前端免费学习笔记（深入）”；
- 用户名输入框应设
autocomplete="username"（"email"仅当账号是邮箱时才用） - 密码输入框必须设
autocomplete="current-password"（新注册或改密页才用"new-password"） - 禁用自动填充？别用
autocomplete="off"，它已被现代浏览器忽略；如真需禁用，请用autocomplete="new-password"+ 随机name（但会牺牲用户体验）
纯 HTML 登录页无法验证密码强度或拦截空提交，这些必须靠 JS 补位
HTML 的 required、minlength 等属性只能做基础校验，且容易被绕过（比如直接删掉 required 属性再提交）。用户输空密码点登录，表单仍会发出去——后端必须兜底，前端不能依赖 HTML 属性防错。
性能影响：过度依赖 JS 校验（比如每输入一个字符就跑正则检测大小写字母+数字+符号）可能卡顿低端设备。
- 必加 JS 校验项：
username和password非空、密码长度 ≥ 6（别设太高，8 位足够） - 避免在
input的oninput中实时校验复杂规则；改用form.addEventListener('submit', ...)统一拦截 - 提交后立即禁用按钮：
button.disabled = true，防止重复点击导致多次请求 - 错误信息不要只靠
<small></small>或注释显示；用<span class="error"></span>并设置aria-live="polite"适配读屏器
移动端键盘类型不匹配会导致体验断裂，inputmode 比 type 更精准
在手机上点用户名框，弹出数字键盘；点密码框，弹出带「.@」的英文键盘——用户得手动切输入法。这不是 bug，是没用对属性。
兼容性注意：inputmode 在 iOS 12.2+ 和 Android Chrome 71+ 支持良好，老版本会安静降级，不影响功能。
- 用户名框加
inputmode="text"（即使type="text"已存在） - 邮箱账号用
inputmode="email"，能唤起 @ 键优先的键盘 - 密码框统一用
inputmode="text"，别用"numeric"或"decimal"——密码不该限制输入法 - 避免同时设
type="number"和inputmode="text"，行为冲突，iOS 可能忽略后者
<form></form> 设置 novalidate 却又自己写了 JS 校验。浏览器默认会在 JS 提交前弹原生提示（如“请填写此字段”），和你的错误提示打架。要么删掉所有 required，全由 JS 控制；要么加 novalidate 属性显式关闭原生校验。
