登录界面初始焦点应使用autofocus属性使光标自动落在用户名输入框；密码框回车提交需确保表单完整包裹且含submit按钮；移动端应通过inputmode和type匹配键盘类型；敏感页面需用no-store缓存策略并禁用autocomplete。
登录界面加载时如何用 HTML 控制初始焦点
页面刚打开就该让光标自动落在用户名输入框，这是基本体验。HTML 本身不“执行”行为，但 autofocus 属性能直接告诉浏览器：这个元素一渲染完就聚焦。
常见错误是加了 autofocus 却没生效——比如写在动态插入的元素上、或被 JS 覆盖、或页面有多个 autofocus（浏览器只认第一个）。
-
autofocus必须是原生 HTML 属性，不能靠 JS 模拟（如input.focus()在某些 iOS Safari 版本会静默失败） - 只对可聚焦元素有效：
<input>、<textarea></textarea>、<button></button>、带tabindex的元素 - 避免在模态框未显示时就给内部 input 加
autofocus，否则焦点可能落在不可见区域，用户按 Tab 会跳过关键控件
<input type="text" name="username" autofocus>
密码框回车后自动提交表单的 HTML 写法
用户输完密码按回车，表单应该立刻提交，而不是要求再点一次登录按钮。这靠的是 HTML 表单默认行为，不是 JS。
最容易踩的坑是把 <button></button> 写成 type="button"，它会完全禁用表单提交；或者整个表单没包在 <form></form> 里，回车就毫无反应。
立即学习“前端免费学习笔记（深入）”；
第一步】：将安装包中所有的文件夹和文件用ftp工具以二进制方式上传至服务器空间;(如果您不知如何设置ftp工具的二进制方式，可以查看：(http://www.shopex.cn/support/qa/setup.help.717.html)【第二步】：在浏览器中输入 http://您的商店域名/install 进行安装界面进行安装即可。【第二步】：登录后台，工具箱里恢复数据管理后台是url/sho
- 确保登录区域是完整的
<form></form>标签包裹，且包含至少一个<input type="submit">或<button type="submit"></button> - 密码
<input type="password">不需要额外属性，只要在<form></form>内，回车即触发表单提交 - 如果用了
event.preventDefault()又没手动调form.submit()，回车就彻底失效——这不是 HTML 问题，是 JS 干扰了原生逻辑
<form action="/login" method="POST"> <input type="text" name="username" autofocus> <input type="password" name="password"> <button type="submit">登录</button> </form>
移动端键盘类型与输入体验优化（HTML 层面）
在手机上输用户名或密码时，弹出的键盘应该匹配内容类型，比如邮箱要显示 @ 键，数字验证码要弹数字键盘。这些全靠 HTML 的 inputmode 和 type 控制。
很多人只改 type，却忽略 inputmode——后者才是现代浏览器（尤其 Android Chrome、iOS Safari）决定键盘布局的关键依据。
- 用户名用
<input type="text" inputmode="text">（默认，不用显式写） - 邮箱必须写
<input type="email" inputmode="email">，否则 iOS 可能仍弹全键盘 - 验证码常用
<input type="text" inputmode="numeric" pattern="[0-9]*">，pattern配合inputmode能更稳地触发数字键盘 - 密码框别乱设
inputmode，type="password"本身已触发安全键盘，加inputmode="text"反而可能暴露明文输入提示
防止登录页被缓存导致敏感信息残留
用户登出后点浏览器后退，如果登录页被缓存，可能看到上一个用户的账号甚至密码（尤其是 autocomplete="on" 且浏览器记住了字段）。这不是样式或交互问题，是 HTML 响应头 + 元标签协同控制的底线。
仅靠前端无法 100% 阻止，但 HTML 层能做两件事：明确声明不缓存，以及禁止自动填充敏感字段。
- 在
中加：<meta http-equiv="Cache-Control" content="no-store">（注意是no-store，不是no-cache） - 所有敏感输入框必须显式关掉自动填充：
<input type="text" name="username" autocomplete="off">（部分浏览器要求更严格，可试autocomplete="new-password"） - 不要依赖
autocomplete="off"单独生效——Chrome 会忽略它，必须配合name值不匹配已知字段（如不用name="password"，而用name="pwd"），但这会增加后端解析成本，慎用
