autocomplete：告诉浏览器这个字段是什么

autocomplete 不是「开 / 关」那么简单。除了 on / off，它的值还可以是一串有序 token：用一个字段名 token（如 given-name / postal-code / cc-number）告诉浏览器与密码管理器「这个框该填什么语义的数据」，前面再依次缀上可选的 section-* 分组、shipping / billing 用途、home / work 等联系方式限定。本页用一个 token 解析器把这套语法拆开，再把它和另外两个正交的维度——type（数据类型）与 inputmode（软键盘）——摆在一起对照。真实的自动填充依赖浏览器登录态与用户已存数据，无法在 demo 里稳定触发，故本页以结构化讲解 + 语法解析为主。

1 · token 语法：顺序固定，字段名必需

在下面输入一个 autocomplete 值（或点预置例子），解析器会按规范顺序把它拆成各分量并标注角色。完整语法依次为（除字段名外都可选，但顺序固定）：section-* → shipping | billing → 联系方式(home / work / mobile / fax / pager)→ 字段名 token（必需） → 可选 webauthn。

2 · 常用字段名 token

3 · 三个正交维度：type / autocomplete / inputmode

规范(4.10.1.7)反复强调：一个字段上有三件互不干扰的事——它是什么数据类型、它语义上该填什么、用户打字时弹什么软键盘。三者可独立设置，不要混为一谈。最典型的反例就是短信验证码框：它是普通文本(type="text")，却要数字软键盘(inputmode="numeric")、又要被识别为一次性验证码(autocomplete="one-time-code")。

4 · 一份能被密码管理器识别的注册表单

把每个框标对 token，浏览器与密码管理器才能把它们当成一组账户凭证去填充 / 保存。注意 given-name / family-name 各占一框、验证码框三个维度各司其职、注册密码用 new-password（而非 current-password）。下面只展示 markup，真实自动填充需在浏览器登录态、且用户已存有对应数据时才会发生。

<form action="/register" method="post" autocomplete="on">
  <input name="first" type="text"
         autocomplete="given-name" />
  <input name="last"  type="text"
         autocomplete="family-name" />

  <input name="email" type="email"
         inputmode="email"
         autocomplete="email" />

  <!-- 短信验证码：三维各管一摊 -->
  <input name="otp"   type="text"
         inputmode="numeric"
         autocomplete="one-time-code" />

  <!-- 注册密码：让密码管理器生成强密码 -->
  <input name="pw"    type="password"
         autocomplete="new-password" />

  <!-- 收货地址：section + 用途 + 字段名 -->
  <input name="zip"   type="text"
         inputmode="numeric"
         autocomplete="section-ship shipping postal-code" />
</form>