登录表单必须用包裹且method="post"、action指向后端接口；input需有name属性，密码框必须用type="password"；提交按钮须为type="submit"；https为强制前提。
登录表单必须用 <form></form> 包裹，且 method 和 action 不可省略
浏览器提交表单时，不加 <form></form> 标签或漏掉 method（默认是 GET）会导致密码明文暴露在 URL 中，非常危险。生产环境一律用 method="POST"，action 指向后端处理接口（如 "/api/login"），不能留空或写成 "#"。
常见错误现象：TypeError: Cannot read property 'username' of undefined（后端收不到字段），往往是因为表单没包住输入框，或 <input> 缺少 name 属性。
-
<input type="text" name="username">和<input type="password" name="password">的name值必须与后端约定一致（如 Python Flask 里用request.form['username']） - 不要用
id或class代替name——表单提交只认name - 如果用前端框架（如 Vue/React），仍需保留
name，否则原生表单提交逻辑会失效
type="password" 是唯一安全的密码输入方式，别用 type="text" 加 JS 掩码
用 JavaScript 把 type="text" 动态改成 type="password" 看似可行，但存在严重隐患：页面源码或调试器中仍可看到明文；用户复制粘贴时可能意外暴露；部分屏幕阅读器无法正确识别。
真正有效的做法只有：直接写 <input type="password" name="password">。现代浏览器对 type="password" 有基础防护（如禁止自动填充到非 HTTPS 页面、限制剪贴板读取）。
- 不要给密码框设
value初始值（包括空字符串value=""），某些旧版浏览器会因此触发不安全的自动填充 - 若需“显示密码”功能，用
<button type="button"></button>切换type属性，并同步更新aria-label供无障碍使用 - 移动端注意：iOS Safari 对
type="password"的键盘类型控制较严格，避免额外加inputmode="text"干扰
提交按钮必须用 <button type="submit"></button>，而非 <div> 或 <code>onclick
用 <div onclick="login()"> 或 <code><button onclick="login()"></button> 绕过表单提交，等于放弃浏览器原生能力：回车键无法触发表单、formdata API 失效、无障碍支持断裂、服务端 CSRF 防护难生效。
正确的提交按钮应位于 <form></form> 内部，且显式声明 type="submit"：
- 加上
required属性可触发浏览器原生校验（但仅限基础非空，业务逻辑如密码长度、格式仍需后端验证） - 禁用按钮时用
disabled，不要用onclick="return false"——后者无法阻止键盘回车提交 - 如果需要加载中状态，应在
submit事件监听里event.preventDefault()后手动发请求，而不是一开始就不让表单提交
HTTPS 是硬性前提，HTTP 下任何前端防护都形同虚设
哪怕你用了 type="password"、加了前端加密、甚至上了 WebAuthn，只要页面本身走 HTTP，攻击者就能中间人劫持，替换登录表单的 action 地址，或直接监听 submit 事件窃取明文。
所有现代浏览器已将 HTTP 站点标记为“不安全”，Chrome 甚至禁止 HTTP 页面调用 getUserMedia 或 Geolocation——登录这种敏感操作，没有 HTTPS 就不该存在。
- 本地开发可用
localhost（浏览器视为安全上下文），但连127.0.0.1都不行，务必用localhost - Let’s Encrypt 免费证书 + Nginx 自动配置，5 分钟内可完成，没必要找借口跳过
- 检查是否生效：打开 DevTools → Security 标签页，确认显示 “Connection secure”
