如果有两个或多个具有相同标签的<输入>，有没有办法告诉浏览器自动填充<表单中的特定字段>？- HTML、JS、React

问：

如果有两个或多个具有相同标签，浏览器是否能够自动填充特定字段？

我有一个看起来像这样的表格：

<form>
  <label>Card Number</label>
  <input type="text" name="cardNumber" id="cardNumber" />
  <br />
  <label>ZIP</label>
  <input type="text" name="billingZip" id="billingZip" />
  <br />
    <label>Street</label>
    <input type="text" name="street" id="street" />
    <br />
    <label>City</label>
    <input type="text" name="city" id="city" />
    <br />
    <label>ZIP</label>
    <input type="text" name="shippingZip" id="shippingZip" />
</form>

但自动完成始终填充第一个 ZIP 字段，而不是第二个;我希望自动完成来填充第二个字段。 我尝试在第二个ZIP输入和第一个ZIP输入中添加标签，但现在，这两个字段都没有填充。autoCompletenew-password

<form>
  <label>Card Number</label>
  <input type="text" name="cardNumber" id="cardNumber" />
  <br />
  <label>ZIP</label>
  <input type="text" name="billingZip" id="billingZip" autoComplete="new-password"/>
  <br />
    <label>Street</label>
    <input type="text" name="street" id="street" />
    <br />
    <label>City</label>
    <input type="text" name="city" id="city" />
    <br />
    <label>ZIP</label>
    <input type="text" name="shippingZip" id="shippingZip" autoComplete="postal-code" />
</form>

编辑1： 使用这样的字段集时，它也不起作用

<form>
  <fieldset>
    <label>Card Number</label>
    <input type="text" name="cardNumber" id="cardNumber" />
    <br />
    <label>ZIP</label>
    <input type="text" name="billingZip" id="billingZip" />
  </fieldset>
  <br />

  <fieldset>
    <label>Street</label>
    <input type="text" name="street" id="street" />
    <br />
    <label>City</label>
    <input type="text" name="city" id="city" />
    <br />
    <label>ZIP</label>
    <input type="text" name="shippingZip" id="shippingZip" />
  </fieldset>
</form>

代码沙盒在这里：https://codesandbox.io/s/delicate-meadow-wdwgrx?file=/src/App.js