登录表单HTML需语义正确：form包裹input，每个input配label（for+id或嵌套）；CSS重置box-sizing、appearance，慎用outline；用:focus-within和:invalid:not(:placeholder-shown)实现反馈；响应式按内容宽度而非设备断点调整。
登录表单的 HTML 结构要干净，form 和 input 必须语义正确
别用 div 套一堆 input 冒充表单。浏览器和屏幕阅读器依赖原生语义——form 包裹输入项，每个 input 都得有对应的 label（用 for + id 关联，或嵌套写法）。否则键盘用户 Tab 切换会跳过输入框，或者自动填充失效。
推荐结构：
用 CSS 控制宽度、间距和聚焦状态，避免默认样式干扰
浏览器对 input 和 button 有强默认样式（比如 Chrome 的阴影、Safari 的圆角），直接写宽高容易错位。先重置关键属性：
-
box-sizing: border-box必加，否则padding会让实际宽度超预期 -
appearance: none清除原生控件样式（尤其button和input[type="password"]在 Safari 中的默认内边距） -
outline: none要慎用——移除后必须手动加:focus样式（比如border: 2px solid #007bff），否则可访问性不达标 - 垂直对齐用
flex或grid，别靠margin-top硬调
输入框聚焦和错误状态要用伪类真实反馈
只改 :hover 不够——用户真正需要的是操作反馈。两个关键伪类不能漏：
