关键是用标准 autocomplete 值让浏览器精准自动填充：邮箱用 email，手机号用 tel，地址用 street-address 和 address-line2，邮编用 postal-code，生日需 type="date" + bday，且 type/name/autocomplete 三者语义一致。

核心是让浏览器“看懂”字段意图，并在用户手指刚点进输入框时，就弹出准确建议——这比任何提示文案都管用。移动端屏幕小、操作成本高，一次填错或手动切换键盘就可能直接关页。

用对 autocomplete 值，让 Safari 和 Chrome 都愿意填

浏览器只认 WHATWG 规范里的标准 token，大小写、连字符、拼写错一个都不行：

• 邮箱必须写 autocomplete="email"，不是 "user-email" 或 "Email"
• 手机号用 autocomplete="tel"，搭配 type="tel" 才能唤出数字键盘和 *# 符号
• 地址第一行写 autocomplete="street-address"，第二行写 autocomplete="address-line2"（注意是 line2，不是 line-2）
• 邮编用 autocomplete="postal-code"，"zip" 或 "postcode" 完全无效
• 生日字段必须是 type="date" autocomplete="bday"，type="text" 再配 bday 也没用

type + name + autocomplete 三者必须语义一致

缺一不可，尤其在 Safari 上，name 不标准会直接放弃填充：

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 邮箱字段：type="email" name="email" autocomplete="email">
• 姓名字段：type="text" name="name" autocomplete="name">（不拆 first/last 更稳妥）
• 信用卡号：type="text" name="cc_number" autocomplete="cc-number">（注意 name 用下划线，autocomplete 用短横线）
• 避免 type="text" 却配 autocomplete="email"——浏览器优先信 type，会跳过自动填充

移动端专属优化细节

针对软键盘、遮挡、触控等真实场景做微调：

• 加 inputmode="email" 或 inputmode="numeric"，比仅靠 type 更可靠地唤出对应键盘
• 确保 label 显式关联（），不能只靠 placeholder；隐藏 label 但保留视觉占位，防止 iOS 语音朗读异常
• 所有可点击元素（按钮、单选/复选框）点击区域不小于 44×44px，避免误触后退出表单
• 地址类字段配合地理定位 API 自动填充初值，再让用户微调，比从零填写流失率低 60% 以上
• 密码字段严格区分：autocomplete="current-password"（登录），autocomplete="new-password"（注册或改密）

避开那些“看似合理实则致命”的坑

很多表单失效，不是没写 autocomplete，而是被其他设置悄悄关掉了：

• 整个 form 写了 autocomplete="off"？现代浏览器虽已弱化处理，但仍会影响 Safari 的判断
• 字段是 JS 动态插入的（如 React 的 {show && }）？浏览器初始化时根本没扫描到它，填不了
• input 被设为 display: none 或初始 value 被 JS 清空？填充时机被破坏，建议用 visibility: hidden + opacity: 0 替代隐藏
• 同一页面两个字段都写 autocomplete="tel"？浏览器随机选一个填，用户看到的可能是错的号码

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！