如何让浏览器自动填充表单中同标签的指定输入框？

问题场景 #

表单包含两个标注为ZIP的输入框，浏览器默认总是自动填充第一个字段，但需求是让浏览器自动填充第二个ZIP输入框。此前尝试过以下方法但均无效：

• 为第二个输入框设置autoComplete="postal-code"，第一个设置autoComplete="new-password"，结果两个字段都无法被自动填充
• 使用<fieldset>对字段进行分组，依然无法改变浏览器的填充行为

解决方案 #

通过正确配置<input>的name、autoComplete属性，以及<label>的htmlFor属性，可以引导浏览器精准识别并填充指定字段。

示例代码如下：

<!-- 第一个不需要自动填充的ZIP输入框 -->
<label for="billing-zip">账单ZIP</label>
<input type="text" id="billing-zip" name="billing-zip" autocomplete="off">

<!-- 需要自动填充的第二个ZIP输入框 -->
<label for="shipping-zip">配送ZIP</label>
<input type="text" id="shipping-zip" name="shipping-zip" autocomplete="postal-code">

关键配置要点：

• 为每个输入框设置唯一的id和name属性，避免命名冲突导致浏览器识别混乱
• 为需要自动填充的字段设置正确的autocomplete值（如postal-code对应邮编字段）
• 确保<label>的htmlFor属性与对应<input>的id完全匹配，帮助浏览器关联标签和输入框
• 对不需要自动填充的字段，可设置autocomplete="off"明确告知浏览器跳过该字段

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