表单必须用包裹并设action/method，密码框加autocomplete="off"，输入框须用关联，提交前至少校验非空。
表单结构必须用 <form></form> 包裹，否则按回车无法提交
浏览器默认行为是：用户在 <input type="text"> 或 <input type="password"> 中按回车，只有外层有 <form></form> 且包含一个 type="submit" 按钮时，才会触发表单提交。漏掉 <form></form> 是新手最常踩的坑，结果就是输完账号密码，回车没反应，点按钮也没反应。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
<input>和登录按钮都放在<form></form>标签内 - 按钮用
<button type="submit"></button>，别只写<button></button>（默认是type="button"，不触发提交） - 给
<form></form>加上action和method属性，比如action="/login"、method="POST"，否则提交时可能跳到空白页或报 405
input[type="password"] 的 autocomplete 要显式关掉
现代浏览器会强行给密码框填入历史密码，甚至覆盖你写的 placeholder，导致用户看到“●●●●●●”却不知自己是否已输入——尤其在开发环境反复测试时特别干扰判断。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有密码输入框必须加
autocomplete="off"（部分浏览器要求更严格，可试autocomplete="new-password"） - 账号输入框也建议加
autocomplete="username"，兼顾体验与可控性 - 别依赖 CSS 隐藏密码内容来“防止泄露”，那是掩耳盗铃；真正要防的是自动填充错乱
用 label 关联输入框，否则移动端点不准、读屏器不可用
直接写 <input type="text"> 账号： 看似省事，但用户点击“账号：”文字区域根本不会聚焦到输入框——尤其是手机小屏，点文字比点输入框边缘容易得多。
一个经过完善设计的经典网上购物系统，适用于各种服务器环境的高效网上购物系统解决方案，shopxp购物系统Html版是我们首次推出的免费购物系统源码，完整可用。我们的系统是免费的不需要购买，该系统经过全面测试完整可用，如果碰到问题，先检查一下本地的配置或到官方网站提交问题求助。 网站管理地址：http://你的网址/admin/login.asp 用户名：admin 密 码：admin 提示：如果您
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个
<input>前后必须配<label></label>，用for和id关联：<label for="username">账号</label><input id="username" type="text"> - 避免用
<label>账号<input></label>这种包裹写法，某些旧版 Safari 对嵌套input的label支持不稳定 - 这个细节不影响视觉，但影响实际可用性；测试时真拿手指点两下“密码”俩字，看光标进没进去
提交前校验靠前端 JS 是假安全，但空值拦截必须做
用 JS 检查邮箱格式、密码长度，只是优化体验；真正拦不住绕过 JS 的请求。但连空账号空密码都不拦，等于把服务器当筛子用——大量无效请求堆在后端，日志刷屏，还可能暴露接口路径。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 至少拦截空提交：
if (!username.value.trim() || !password.value.trim()) { alert('账号密码不能为空'); return false; } - 别在
onclick上绑校验，统一用form.addEventListener('submit', ...)，避免重复绑定 - 校验失败后，聚焦到第一个空字段：
username.focus()，减少用户操作成本
样式和动效可以慢慢调，但表单语义、交互反馈、基础防护这三块，少一个，上线后就不是“不好看”，而是“不能用”。特别是 autocomplete 和 label 关联，改起来就几行，不改的话，测试同事第一轮就会找你。
