一个能实际提交的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"），用户输密码时不小心开了大写，自己都未必察觉，然后反复提示“密码错误”。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 必须用
<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 里就写对。改起来容易，上线后再补，用户已经习惯输错密码重试三次了。
