一个能实际提交的html登录页面必须包含：骨架；name="username"和name="password"的对应输入框；type="submit"按钮；密码框必须用type="password"；关键autocomplete、autocapitalize等语义属性不可省。
HTML 登录页面必须包含哪些表单元素
一个能实际提交的登录页，<form></form> 是骨架，缺了它就只是静态图。用户输完点“登录”，浏览器得知道把 username 和 password 发给谁、怎么发。
常见错误是只写两个 <input>，没包 <form></form>，或者写了但漏掉 action 和 method——结果点击按钮毫无反应，控制台也没报错，纯静默失败。
-
<form action="/login" method="POST"></form>是底线配置；action指向后端接口地址，本地调试可先设为"#"或留空，但不能删 -
<input type="text" name="username">和<input type="password" name="password">的name值必须和后端约定一致，比如 Django 期望username，Express 默认收body.username - 加
<button type="submit"></button>，别用<button onclick="login()"></button>—— 后者绕过表单原生提交逻辑，后续加 CSRF、自动填充、Enter 键触发都会出问题
密码输入框为什么不能用 type="text"
不是“看起来不安全”那么简单，而是浏览器会直接无视密码字段的自动填充、密码管理器集成、甚至部分安全审计工具会标红警告。Chrome 对 type="text" 的密码框会拒绝显示“保存密码”弹窗。
更隐蔽的坑：iOS Safari 在 type="text" 上默认启用首字母大写（autocapitalize="sentences"），用户输密码时不小心开了大写，自己都未必察觉，然后反复提示“密码错误”。
立即学习“前端免费学习笔记（深入）”；
采用zblog修改的模板，简单方便，直接解压上传到空间即可使用，页面简单，适合SEO，导航，次导航，最新文章列表，随机文章列表全部都有，网站采用扁平结构，非常适用淘宝客类小站，所有文章都在根目录下。所有需要修改的地方在网页上各个地方都有标注说明，一切在网站后台都可以修改，无须修改任何程序代码，是新手的不二选择。后台登陆地址： 域名/login.asp用户名：admin (建议不要修改)密码：adm
- 必须用
<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<script>..."}</script>，后端没过滤就存进数据库，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）大概率无法自动填充 -
<form autocomplete="off"></form>是反模式，会禁用整个表单的自动填充，包括用户名；真要关，只关特定字段，比如验证码输入框 -
<input autocapitalize="none" autocorrect="off" spellcheck="false">对密码框尤其重要，iOS/Android 键盘不会擅自纠错或大写首字母，避免用户输错还不自知
样式可以后面加，但这些语义属性得在第一版 HTML 里就写对。改起来容易，上线后再补，用户已经习惯输错密码重试三次了。
