必须设置 autocomplete="email" 或 "username" 才能触发邮箱自动填充，仅 type="email" 无效；需置于语义化表单内，且用户浏览器中已保存对应域名的邮箱账号数据。

HTML5 中使用 type="email" 配合 autocomplete 属性，可以让浏览器自动识别邮箱输入框，并在用户点击时唤出历史保存的邮箱建议列表。关键在于正确设置 autocomplete 值，而非仅依赖 type="email"。

必须设置合适的 autocomplete 值

仅写 type="email" 不足以触发邮箱自动填充。浏览器需通过 autocomplete 属性判断字段语义。推荐使用以下任一标准值：

• autocomplete="email" —— 最直接、最通用，明确告诉浏览器这是“邮箱地址”字段
• autocomplete="username" —— 若邮箱同时用作登录账号（如 Gmail、Outlook），部分浏览器（尤其是 Chrome）会优先匹配已保存的账号邮箱
• autocomplete="off" 或不设该属性 —— 会禁用自动填充，务必避免

确保表单结构合理

浏览器对自动填充的支持依赖于表单上下文。以下做法能提升识别率：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 将邮箱输入框放在
  标签内，且表单有明确用途（如 login、registration）
• 配合其他语义化字段，例如： 与 同时存在，有助于浏览器关联账号信息
• 避免用 JavaScript 动态修改 type 或 autocomplete 值，否则可能中断自动填充逻辑

用户端需要已保存有效邮箱数据

自动填充列表来源于用户浏览器中已保存的账号信息（如 Chrome 的「密码与表单」设置里保存的登录项）。这意味着：

• 用户此前必须在相同域名下成功提交过含邮箱的表单，且浏览器弹出过“保存密码”提示并被允许
• 保存的账号条目中需包含邮箱字段（例如用户名是邮箱格式，且 autocomplete="username" 或 email 被识别）
• 移动端 Safari 和 Chrome 对 autocomplete="email" 支持良好；旧版 Edge 或 Firefox 可能响应较弱，但主流版本均已支持

简单示例代码

一个可立即生效的最小可用示例：

  邮箱
         id="user-email"
      name="email"
      autocomplete="email"
      required>
  登录

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