密码输入框必须用 type="password" 并配对 autocomplete 值，登录页用 "current-password"，注册/改密页用 "new-password"；name 必须唯一且与后端一致；邮箱、手机号需语义化 type 加 pattern 校验；单选/多选靠 name 分组并显式声明默认值；label 必须用 for 绑定 input 的 id 以保障可访问性。

密码输入框必须用 type="password" 且配对 autocomplete 值

明文显示密码是硬性安全违规，<input type="text"> 或漏写 type 都会导致密码可见。现代浏览器还会在未设 autocomplete 时自动填充旧密码，干扰注册流程。

• 登录页用 autocomplete="current-password"，让浏览器识别这是“当前账户密码”
• 注册/改密页必须用 autocomplete="new-password"，否则 Chrome、Edge 等会拒绝自动填充或填错字段
• 绝对不要用 autocomplete="off" —— 多数浏览器已无视该值，且语义不清
• name 必须唯一且与后端 API 文档一致，比如后端期待 password_new，就不能写成 new_password

邮箱和手机号要用语义化 type + pattern 补强校验

type="email" 能触发浏览器原生格式提示（如 iOS 键盘自动弹出 @），但无法防住 test@ 这类无效值；type="tel" 只唤起数字键盘，不校验长度或格式。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 邮箱建议加 required 和 pattern="^[^\s@]+@[^\s@]+\.[^\s@]+$"（基础正则，覆盖常见错误）
• 手机号必须搭配 pattern，例如 pattern="[0-9]{11}"（国内）或更严谨的 pattern="^1[3-9]\d{9}$"
• 避免只靠前端校验：这些 pattern 仅提升体验，后端仍需完整验证
• 注意 type="number" 会把空值转成 "" 而非 null，年龄等字段若允许为空，优先用 type="text" inputmode="numeric"

单选与多选必须靠 name 分组，且默认值要显式声明

没有 name 的 <input type="radio"> 或 <input type="checkbox"> 不会被提交；未设 checked 的单选组，用户不点就永远无值 —— 后端收不到字段，不是空字符串，而是压根缺失。

• 性别单选必须统一 name="gender"，并至少一个带 checked，例如：<input type="radio" name="gender" value="male" checked>
• 兴趣爱好多选可多个 checked，但 name 要相同（如 name="hobbies"），后端才按数组接收
• 别用 value="是" 这类中文值传给后端，应使用英文或标准标识符（如 value="sports"）
• 若某项为“其他”，需额外配一个 <input type="text" name="hobbies_other"> 并 JS 控制显隐，不能塞进 checkbox 的 value 里

label 和 input 对齐别硬调 margin，优先用语义化绑定

视觉对齐不等于可访问对齐。只靠 <td>姓名:</td> <td><input></td> 或手动加 margin-top，会让屏幕阅读器无法关联文字与控件，键盘用户点击文字也无法聚焦输入框。

• 每个 <input> 必须有唯一 id，对应 <label for="xxx"></label>，这是 WCAG 最低要求
• 垂直对齐优先用 vertical-align: middle 作用于 label 和 input 元素本身，而非父容器
• 避免在 <label></label> 里嵌套 <div> 或设置 <code>display: block 后再调 margin —— 会破坏原生 baseline 对齐逻辑
• 表格布局（<table>）虽能快速对齐，但仅限内网/原型场景；真实项目请用 CSS Grid 或 Flex，并确保 <code>label 仍绑定 for 实际提交时，name 拼错、autocomplete 值误用、单选没设 checked、label 未绑定 id —— 这四类问题占表单数据丢失原因的 80% 以上，检查顺序建议从这四个点开始。