登录表单必须确保语义正确与可访问性：input需设正确type属性并绑定label，全局重置box-sizing为border-box，按钮禁用须用disabled属性而非仅css，密码切换需同步更新aria-label。
登录表单的 input 和 button 必须有明确的语义与可访问性
很多“好看”的登录框一上线就被测试同学打回来，问题不在颜色或圆角，而在屏幕阅读器读不出“这是密码输入框”——input 缺少 type="password" 或没配 label。浏览器自动填充、密码管理器识别、甚至部分安卓键盘的“显示密码”小眼睛，都依赖这个基础语义。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
input标签必须带type：用户名用type="text"或更准确的type="email"，密码严格用type="password" - 每个
input都要绑定label（用for+id，或把input包在label里），否则 WCAG 2.1 AA 级别不达标 - 避免用
div模拟输入框——再像也不支持复制粘贴、IME 输入、焦点管理，移动端尤其卡顿
CSS 控制宽度、间距和响应式时，别碰 box-sizing 默认值
写完样式发现输入框总比按钮宽 4px？或者在 ios safari 上左右留白不一致？大概率是忘了重置 box-sizing。浏览器默认 content-box，但 padding 和 border 会额外撑开宽度，而现代布局（尤其是 flex/Grid）要求所有元素统一按 border-box 计算。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局加一条：
* { box-sizing: border-box; }，不是“可选”，是必加 - 按钮和输入框的
width建议用100%而非固定像素，配合max-width控制上限（比如max-width: 320px） - 垂直居中别靠
margin-top硬调——用display: flex; flex-direction: column;包住整个表单，再对子元素设align-items: center;
点击登录按钮后，禁用状态必须靠 disabled 属性，不能只靠 CSS
常见错误：用户点一次登录，按钮变灰了，但网络请求还没发出去，用户又连点三次——结果后端收到重复提交，前端还一脸懵。CSS 的 opacity: 0.5 或 pointer-events: none 只是视觉欺骗，根本拦不住事件冒泡和重复触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 提交瞬间立刻设置
button.disabled = true，同时改文字为“登录中…”（别只改颜色） - 成功或失败后，必须手动设回
button.disabled = false；别指望表单重置自动恢复 - 如果用框架（如 React），确保
disabled是受控属性，不要混用 dom 操作和状态更新
密码显示/隐藏切换功能，type 切换必须同步更新 aria-label
图标按钮点了能切 type，但屏幕阅读器仍读“显示密码”，或者点了没反应——问题常出在没同步更新 ARIA 属性。iOS VoiceOver、NVDA 这些工具全靠 aria-label 或 aria-live 告诉用户当前状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 切换时不仅要改
input.type，还要同步改按钮的aria-label（例如从“显示密码”变成“隐藏密码”） - 图标用 SVG 或字体图标时，加
aria-hidden="true"，避免被重复朗读 - 别用
visibility: hidden或display: none控制切换按钮——它需要始终在可访问树中
事情说清了就结束。最常漏的是 label 绑定和 box-sizing 全局重置，这两个点一错，后面所有样式和交互都会慢慢偏移。