Chrome 108版本HTML表单autocomplete功能失效问题求助

问题描述 #

我在Chrome 108版本中测试表单自动填充功能，已经开启了所有相关自动填充设置。尝试修改HTML代码中各类autocomplete属性值（如given-name、family-name等），但表单自动填充仍无法正常工作。

相关代码如下：

HTML代码

<label for="firstName">First Name:</label>
<input name="firstName" type="text" autocomplete="given-name">

<label for="lastName">Last Name:</label>
<input name="lastName" type="text" autocomplete="family-name">

<label for="MiddleName">Middle Name:</label>
<input name="MiddleName" type="text" autocomplete="additional-name">

<label for="NickName">Nick Name:</label>
<input name="NickName" type="text" autocomplete="nickname">

<label for="email">Email:</label>
<input name="email" type="email" autocomplete="email">

<button>Submit</button>

CSS代码

button,
input
    {
    display:block;
    margin: 4px;
    }

修复方案 #

• 给表单添加<form>标签包裹
  Chrome的自动填充逻辑依赖完整的表单上下文，你的代码里没有用<form>标签包裹输入框和按钮，浏览器无法识别这是一个可自动填充的表单区域。修改后的HTML结构如下：

  <form>
    <label for="firstName">First Name:</label>
    <input name="firstName" type="text" autocomplete="given-name">
  
    <label for="lastName">Last Name:</label>
    <input name="lastName" type="text" autocomplete="family-name">
  
    <label for="MiddleName">Middle Name:</label>
    <input name="MiddleName" type="text" autocomplete="additional-name">
  
    <label for="NickName">Nick Name:</label>
    <input name="NickName" type="text" autocomplete="nickname">
  
    <label for="email">Email:</label>
    <input name="email" type="email" autocomplete="email">
  
    <button>Submit</button>
  </form>
  

• 确认Chrome已保存对应填充数据
  检查Chrome设置里的「自动填充 > 地址和联系方式」，确保已经保存了姓名、邮箱等有效数据，没有保存数据的话自然无法触发填充。

• 清除自动填充缓存后重试
  浏览器缓存可能导致异常，按以下步骤操作：

  1. 打开Chrome设置，进入「隐私和安全 > 清除浏览数据」
  2. 勾选「自动填充表单数据」，选择时间范围为「所有时间」
  3. 清除数据后重启浏览器再测试

• 统一属性命名规范
  把name属性改为全小写（比如NickName改成nickname），和autocomplete属性值保持一致，避免大小写差异影响浏览器识别。

内容的提问来源于stack exchange，提问作者Michael36