HTML登录页面制作教程详解

常见错误是只写两个 <input>，没包 ，或者写了但漏掉 action 和 method——结果点击按钮毫无反应，控制台也没报错，纯静默失败。

• 是底线配置；action 指向后端接口地址，本地调试可先设为 "#" 或留空，但不能删
• <input type="text" name="username"> 和 <input type="password" name="password"> 的 name 值必须和后端约定一致，比如 Django 期望 username，Express 默认收 body.username
• 加 ，别用 —— 后者绕过表单原生提交逻辑，后续加 CSRF、自动填充、Enter 键触发都会出问题

密码输入框为什么不能用 type="text"

不是“看起来不安全”那么简单，而是浏览器会直接无视密码字段的自动填充、密码管理器集成、甚至部分安全审计工具会标红警告。Chrome 对 type="text" 的密码框会拒绝显示“保存密码”弹窗。

更隐蔽的坑：iOS Safari 在 type="text" 上默认启用首字母大写（autocapitalize="sentences"），用户输密码时不小心开了大写，自己都未必察觉，然后反复提示“密码错误”。

• 必须用 <input type="password" name="password">，哪怕你打算用 JS 做明文切换，基础类型也得是 password
• 如果要做“显示密码”功能，用 JS 切换 type 属性值即可：input.type = input.type === 'password' ? 'text' : 'password'，不要一开始就写 type="text"
• 别给密码框加 value 静态值（比如 value="123456"）—— 这会让密码明文出现在 HTML 源码里，任何能看网页的人都能拿到

前端校验只是体验优化，拦不住真实请求

用 required、minlength 或 pattern 能让表单在提交前弹提示，但这些全靠浏览器执行，关掉 JS 或用 curl 直接 POST，校验形同虚设。

典型翻车场景：开发者加了 <input pattern="[a-zA-Z0-9_]{3,16}">，以为用户名只能是字母数字下划线，结果攻击者用 curl 发个 {"username":"admin，后端没过滤就存进数据库，XSS 立刻触发。

• required 和 pattern 只用于提升用户输入效率，降低无效提交次数
• 后端必须独立做完整校验：长度、字符集、SQL 注入过滤、XSS 转义，不能信任任何前端传来的值
• 如果用 fetch 提交，记得手动设置 Content-Type: application/json，否则后端（如 Express）可能收不到 req.body，因为默认只解析 application/x-www-form-urlencoded

没有 CSS 的登录页也能工作，但有些属性不能省

纯 HTML 登录页打开就能输、能提交，CSS 只负责长得好不好看。但有三个属性属于“看不见却关键”：

• <input autocomplete="username"> 和 <input autocomplete="current-password"> —— 不加这个，密码管理器（1Password、Bitwarden）大概率无法自动填充
• 是反模式，会禁用整个表单的自动填充，包括用户名；真要关，只关特定字段，比如验证码输入框
• <input autocapitalize="none" autocorrect="off" spellcheck="false"> 对密码框尤其重要，iOS/Android 键盘不会擅自纠错或大写首字母，避免用户输错还不自知

样式可以后面加，但这些语义属性得在第一版 HTML 里就写对。改起来容易，上线后再补，用户已经习惯输错密码重试三次了。

好了，本文到此结束，带大家了解了《HTML登录页面制作教程详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！