表单自动补全功能能够在用户输入表单内容时，根据历史输入记录自动匹配并展示候选内容，大幅降低用户的输入成本。HTML和HTML5针对这一功能的支持方式和配置规则有明显区别，这些差异直接影响最终的用户体验。
HTML时代的自动补全实现
早期的HTML规范中，并没有专门定义表单自动补全的标准属性，浏览器大多依靠自身的默认逻辑实现相关功能。此时开发者无法直接控制自动补全的开启或关闭，只能依赖浏览器的默认行为。
常见的做法是使用autocomplete属性，但早期浏览器对该属性的支持并不统一，不同厂商的实现逻辑差异较大，部分浏览器甚至会忽略开发者的配置，始终开启自动补全。
早期HTML自动补全的代码示例
<form action="/submit" method="post"> <label>用户名：<input type="text" name="username" autocomplete="on"></label> <label>密码：<input type="password" name="password" autocomplete="off"></label> <input type="submit" value="提交"> </form>
上述代码中，虽然设置了autocomplete属性，但不同浏览器的表现可能不一致，部分浏览器会忽略autocomplete="off"的设置，依然展示自动补全的候选内容。
HTML5对自动补全的规范升级
HTML5正式将autocomplete属性纳入标准规范，明确了其取值规则和适用场景，同时扩展了更多细分的自动补全类型，让开发者可以更精准地控制表单的自动补全行为。
HTML5的autocomplete属性取值
HTML5中autocomplete的常见取值分为两类：
- on/off：控制是否开启自动补全，on表示开启，off表示关闭。
- 具体字段类型：如
username、current-password、email、tel等，用于指定当前字段的输入类型，浏览器会匹配对应类型的历史记录展示候选内容。
HTML5自动补全的代码示例
<form action="/login" method="post"> <label>用户名：<input type="text" name="username" autocomplete="username"></label> <label>密码：<input type="password" name="password" autocomplete="current-password"></label> <label>手机号：<input type="tel" name="phone" autocomplete="tel"></label> <label>邮箱：<input type="email" name="email" autocomplete="email"></label> <input type="submit" value="登录"> </form>
上述代码中，每个输入框都配置了对应类型的autocomplete值，浏览器可以更准确地匹配用户的历史输入记录，展示更贴合当前字段的候选内容。
两者的核心差异对比
HTML和HTML5在表单自动补全上的差异主要体现在以下几个方面：
| 对比维度 | HTML | HTML5 |
|---|---|---|
| 规范支持 | 无统一标准，依赖浏览器私有实现 | 纳入官方标准，所有主流浏览器统一支持 |
| 属性取值 | 仅支持on/off，兼容性差 | 支持on/off及具体字段类型，配置更灵活 |
| 控制精度 | 只能全局或单个字段开关，无法区分内容类型 | 可按字段类型匹配历史记录，候选内容更精准 |
| 浏览器兼容性 | 不同浏览器表现差异大，配置可能失效 | 主流浏览器表现一致，配置生效稳定 |
对用户体验的影响变化
HTML5对自动补全的规范升级，给用户体验带来了多方面的正向变化：
输入效率提升
HTML时代自动补全候选内容杂乱，可能匹配到不相关的内容，用户需要手动筛选。HTML5支持按字段类型匹配后，候选内容更精准，用户可以直接选择对应内容，减少输入步骤。
隐私安全增强
HTML中无法精准控制敏感字段的自动补全，可能导致密码、身份证号等敏感信息被自动展示。HTML5可以通过autocomplete="off"或者禁用敏感字段的自动补全类型，避免隐私泄露风险。
交互一致性更好
HTML时代不同浏览器的自动补全样式和行为差异大，用户在不同网站使用表单的体验不一致。HTML5统一规范后，主流浏览器的自动补全表现基本一致，用户的学习成本降低，交互体验更统一。
自定义场景适配
HTML5的细分自动补全类型可以适配更多场景，比如收货地址表单可以配置autocomplete="street-address"，浏览器会自动匹配用户之前填写的地址记录，比HTML时代的通用自动补全更贴合场景需求。
使用注意事项
开发者在使用HTML5自动补全功能时，需要注意以下几点：
- 敏感字段如密码、支付相关信息建议设置
autocomplete="off"，避免信息泄露。 - 对于非敏感且需要提升输入效率的字段，优先使用具体的自动补全类型，而不是通用的on/off。
- 不要滥用
autocomplete="off"，会影响正常用户的输入体验。 - 测试不同浏览器下的自动补全表现，确保功能符合预期。
合理运用HTML5的自动补全规范，可以在保障用户隐私的前提下，大幅提升表单填写效率，优化整体用户体验。