先上图： 虽然不影响项目运行，但是飘着红也想看看咋回事。

项目背景

主要技术：

• vue@2.7
• @element-ui2.15

运行平台：

• mac系统；
• 谷歌113.0.5672.92版本；
• Node.js:v14.17.3

报错信息：

The label's `for` attribute doesn't match any element `id`. This might prevent the browser from correctly autofilling the form and accessibility tools from working correctly.

To fix this issue, make sure the label's `for` attribute references the correct `id` of a form field.

那什么意思呢？

label标签的“for”属性与任何元素“id”都不匹配。这可能会阻止浏览器正确自动填充表单和辅助功能工具正常工作。

要解决此问题，请确保label标签的“for”属性与一个表单元素的id属性建立对应的引用。

原代码：

  <el-form-item label="姓名" prop="fullName">
      <el-input
        v-model.trim="searchForm.fullName"
        clearable
        placeholder="请输入姓名"
        maxlength="30"
      />
   </el-form-item>

说明el-form-item 标签最终转换成了原生的label标签。 所以el-input 是它想要关联的表单元素，进而构成表单域。 所以想解决这个问题，我们可以手动给input上加一个id属性，属性值和v-model 、prop上的保持一致。

  <el-form-item label="姓名" prop="fullName">
      <el-input
        v-model.trim="searchForm.fullName"
        clearable
        placeholder="请输入姓名"
        maxlength="30"
        id="fullName"
      />
   </el-form-item>

经过测试，是可以解决的。发现控制台报错少了一条。

那继续看看，到底是什么原因导致出现这个问题的呢？

label标签的标准用法

我们来看MDN上的一段代码

<label for="name">Name (4 to 8 characters):</label>

<input type="text" id="name" name="name" required minlength="4" maxlength="8" size="10">

我们发现input标签身上有id属性，与label的for属性值是一样的。那么我们来看下for属性的作用。

表示Label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。

要将 label 绑定到其它的控件，请将 label 元素的 for 属性设置为与该控件的 id 相同。

题外话：input身上还有个属性,它跟捆绑聚焦一点也不搭边。但是，要提交表单，你必须为 label 元素所绑定到的控件指定name。

再探究竟

我们用edge浏览器、safari浏览器都不会报这个问题。所以得出结论应该就是此版本的谷歌浏览器加入的新功能。会自动检测标签的用法是否合规。

感觉应该是框架层面element-ui官方做一个兼容处理，自动给表单元素加上一个与label for属性一致的id。