autocomplete属性本身不提升可访问性，必须与label、name、type协同使用才能被屏幕阅读器和浏览器正确识别；label缺失或for绑定错误会导致补全失效和读屏报错，autocomplete值须严格匹配whatwg规范小写标准词（如email、tel），写错即被忽略。

autocomplete 属性本身不提升可访问性，但它和 label、name、type 一起用对了，才能让屏幕阅读器和浏览器补全逻辑都认得清字段用途。

label 缺失或绑定错误，补全和读屏同时失效

浏览器和读屏软件都依赖 label 的语义关联推断字段含义。没 label 或 label[for] 指向错误的 id，会导致 Safari 补全率骤降，NVDA/JAWS 也常报“未命名输入框”。

• 每个 input 必须有唯一 id，且 label[for] 精确匹配它
• 避免仅靠 placeholder 提示，比如写 placeholder="请输入手机号" 而不配 label，语义强度不够
• 动态渲染（React/Vue）时，别漏掉同步生成 id 和 label[for]，复制粘贴容易导致多个 label 绑同一个 id

autocomplete 值写错，等于没写

WHATWG 规范只认小写、无下划线、无空格的标准 token。写成 autocomplete="Email"、autocomplete="user_email" 或 autocomplete="address"，Chrome 和 Safari 都直接跳过——既不填充，也不增强读屏识别。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 姓名用 autocomplete="name"（不是 fullname 或 first_name）
• 邮箱必须是 autocomplete="email"（user-email、mail 全无效）
• 地址行用 autocomplete="street-address"（单写 address 不被识别）
• 密码字段必须区分 autocomplete="current-password" 和 autocomplete="new-password"，混用会禁用整套密码管理器逻辑

type 和 autocomplete 不匹配，补全和键盘布局双崩

浏览器按 type 决定唤起什么键盘，按 autocomplete 决定填什么历史值。两者冲突时，补全可能失效，或键盘错乱。

• type="email" + autocomplete="email" → 邮箱键盘 + 自动候选 ✅
• type="text" + autocomplete="tel" → Chrome 可能填，但 iOS Safari 常跳过 ⚠️
• type="number" + autocomplete="postal-code" → 数字键盘挡地址选择，Android 上易错乱 ❌
• type="date" 是 autocomplete="bday" 唯一生效前提；type="text" 下该值完全被忽略

动态插入 input 时 autocomplete 容易被忽略

Chrome 要求 input 在页面初始 DOM 中存在、未被设过 value（哪怕设为空字符串），才会触发自动填充。JS 动态创建或 React/Vue 条件渲染后插入的 input，即使属性全对，也大概率不工作。

• 必须用 setAttribute('autocomplete', 'email') 显式设置，不能靠 JSX/模板语法后补
• 避免在 useEffect 或 mounted 里才加 autocomplete，应确保首次渲染即带该属性
• SSR hydration 后若重设 value，会中断浏览器填充时机，宁可留空也不预填

最常被忽略的是：autocomplete 不是独立开关，它必须和 label、name、type、HTTPS、表单结构全部对齐，缺一环，补全和可访问性就掉链子。

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