html登录界面必须用包裹输入框和提交按钮，并设置action（如"/api/login"）和method="post"，否则点击无反应、密码可能明文暴露；所有字段须有name属性，密码框需type="password"且autocomplete="new-password"。
用 <form></form> 定义登录行为，不是只放输入框
表单提交必须包裹在 <form></form> 标签内，否则点击“登录”不会触发任何动作。很多人只写 <input type="text"> 和按钮，却忘了 <form></form> 的 action 和 method 属性，导致数据根本没发出去。
常见错误现象：405 Method Not Allowed（后端不接受 GET）、点击按钮页面刷新但无响应、输入内容在地址栏里明文暴露。
-
method推荐用"POST"：避免密码出现在 URL 或浏览器历史中 -
action必须填对后端接收接口路径，比如"/api/login"，空字符串或"#"会导致本地跳转或静默失败 - 加
autocomplete="off"对<input type="password">无效，现代浏览器会忽略；如需禁用自动填充，得用autocomplete="new-password"
type="password" 是必须的，但不能只靠它防泄漏
仅把密码框设为 type="password" 只解决前端遮掩显示问题，不提供任何安全防护。用户复制粘贴、控制台查 DOM、抓包看请求体，密码依然可见。
使用场景：所有含密码字段的登录页都该用，但要注意它和 type="text" 在样式、验证、移动端键盘类型上表现不同。
- 移动端会自动弹出数字/符号键盘，但部分安卓机型对
type="password"触发软键盘延迟，可加inputmode="text"微调 - 不能用
required单独约束密码长度，需配合 JS 或后端校验；minlength="8"才是有效手段 - 别给密码框加
value属性做默认值，浏览器可能缓存或自动填充错误内容
用 name 属性决定后端收到的字段名
后端解析表单数据时，只认 name，不是 id 或 class。写成 <input id="pwd"> 而没设 name，后端收不到这个字段。
参数差异：name="password" 和 name="pwd" 后端接收到的键名完全不同，前后端必须对齐。
- 用户名字段推荐
name="username"或name="email"，避免用"user"这类模糊命名 - 如果后端要求嵌套结构（如
{ "auth": { "username": "...", "password": "..." } }），HTML 无法原生支持，得靠 JS 序列化或后端解析策略处理 - 复选框（如“记住我”）要设
name且有value，否则未勾选时该字段不会出现在提交数据中
提交按钮必须是 <button type="submit"></button> 或 <input type="submit">
用 <button onclick="login()"> 纯 JS 提交，绕过了表单原生校验和语义，还容易漏掉 loading 状态、重复点击、Enter 键触发等细节。</button>
性能 / 兼容性影响：原生提交能自动触发表单验证（required、pattern）、支持 Enter 键登录、适配屏幕阅读器，且在弱网下更可控。
- 按钮文字别写“提交”，用“登录”或“Sign in”更符合用户预期
- 禁用状态要用
disabled属性，而不是仅靠 CSS 灰色样式；否则用户仍可右键“检查元素”删掉 disabled 再点 - 不要用
<input type="button">，它默认不提交，除非手动绑定 JS —— 这就退化成第一种反模式了
name 拼错、method 用 GET、密码框缺 autocomplete="new-password"，这几个点在线上环境最容易被忽略，一出问题就卡在“为什么后端收不到参数”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
