表单必须用包裹，否则回车或点击提交无反应；按钮需设type="submit"；密码框用type="password"并关联label；提交前校验空值和格式，禁用重复提交。
表单必须用
浏览器只对 内的 或回车事件做默认提交行为。裸写 + 看起来像登录页，但点不了、按不了回车——这是新手最常卡住的地方。
- 必须写
，action指向后端接口地址（开发时可先设为"#"占位） -
method推荐显式写成"POST"，避免 GET 暴露密码到 URL 和历史记录里 - 按钮别只用
，要加type="submit"，否则它只是个普通按钮
input[type="password"] 不能省，也别手动加 autocomplete="off"
现代浏览器对密码输入框有自动填充、密码生成、安全提示等支持。autocomplete="off" 在 Chrome/Firefox 中基本失效，还可能触发反模式警告（比如显示“此网站试图阻止密码保存”）。
- 用
，name值要和后端约定字段名一致（如"password"或"pwd"） - 如果真想禁用自动填充（极少数合规场景），可用
autocomplete="new-password"，这是被广泛支持的合法值 - 别把密码框写成
type="text"再靠 JS 遮掩——既不安全又破坏可访问性
label 和 input 必须用 for / id 关联，不然屏幕阅读器和点击体验全崩
用户点击「用户名」文字却没聚焦到输入框？大概率是 没绑定 。这不是“锦上添花”，而是基础交互保障。
- 写法必须成对：
+ - 别只靠包裹写法（
），嵌套在复杂布局里容易错位或被 CSS 干扰 - 移动端点击小输入框困难，关联 label 后整个文字区域都可点击，实测提升 3 倍以上触达率
提交前至少校验空值，但别只靠 required 属性
required 能拦空提交，但拦不住「 」（纯空格）或「test@」（明显无效邮箱）。前端校验不是为了替代后端，而是给用户即时反馈。
立即学习“前端免费学习笔记（深入）”；
- 加简单 JS：监听
form.onsubmit，对username.value.trim() === ""提示并return false - 密码长度建议用
minlength="8"，比纯 JS 判断更轻量且自带浏览器提示气泡 - 别在 submit 里发请求后还让按钮可点——要立刻
button.disabled = true，防止重复提交
