移动端注册表单实现“一键填充”需 type、autocomplete、name、label 四者协同：用户名用 autocomplete="username"，邮箱用 type="email"+autocomplete="email"，密码及确认密码均用 autocomplete="new-password"，姓名拆分为 given-name/family-name，手机号用 type="tel"+autocomplete="tel"；表单须包裹在内并含 submit 按钮；避免敏感 name/id 和 label 关键词以防 chrome 误填；适配移动端需键盘类型联动、点击区域≥44×44px、聚焦时 scrollintoview 居中、验证码字段用非标准 autocomplete 断开关联。
移动端注册表单要真正实现“一键填充”，不能只加 autocomplete="on" 就完事。关键在于让浏览器精准识别每个字段的语义，并在 iOS Safari、Chrome Android 等主流环境下稳定触发右下角小钥匙图标或键盘上方建议栏。这需要 type、autocomplete、name、label 四者协同，缺一不可。
用对 autocomplete 值，且严格匹配规范
浏览器只认 WHATWG 标准值，大小写、连字符、拼写偏差全无效。注册页常见字段必须这样写：
-
用户名/账号：用
autocomplete="username"（不是user、account或login） -
邮箱：
type="email"+autocomplete="email"（"mail"或"user-email"会被忽略） -
密码：必须设为
autocomplete="new-password"（"off"或"false"已被 Chrome/Safari 忽略） -
确认密码：同样用
autocomplete="new-password"，浏览器会识别为成对新密码字段 -
姓名：拆分为
autocomplete="given-name"（名）和autocomplete="family-name"（姓），不推荐用模糊的"name"（Safari 不填） -
手机号：
type="tel"+autocomplete="tel"（"telephone"或"mobile"无效）
结构合规：表单必须“像一个注册表单”
浏览器自动填充依赖语义化结构，以下三点不满足，Safari 可能根本不显示填充按钮：
- 整个输入区域必须包裹在
<form></form>标签内，且最好声明method="post"（即使空 action 也建议写action="#"） - 必须有明确的提交入口：
<button type="submit"></button>或<input type="submit">，不能仅靠 JS 绑定 click - 避免同类型字段重复：例如两个
autocomplete="email"，浏览器无法判断主次，可能全部跳过
规避 Chrome 的误填陷阱
Chrome 会把含密码框的任意表单当作登录流程处理，常把保存的邮箱/用户名塞进第一个文本框（比如昵称、邀请码）。防误填三招：
- 给非账号类字段改掉敏感 name/id：如“昵称”不用
name="username"，改用name="nickname"或带随机后缀的name="nickname_abc123" - 确保
<label></label>文案不含“用户名”“账号”“邮箱”等关键词；placeholder 同理，别写“请输入用户名” - 如果页面同时存在登录和注册逻辑（如 Tab 切换），注册表单的 password 字段务必用
autocomplete="new-password"，且不要与登录区共用 DOM 节点
移动端专属细节补强
光语义正确还不够，得适配手机交互习惯：
-
键盘类型联动：邮箱字段用
type="email"，手机号用type="tel"，地址用type="text"（别用type="number"，否则 Chrome 禁用邮编自动填充） - 点击区域达标：label 和 input 都要有足够大可点范围，iOS 推荐最小 44×44px，可用 padding 或 min-height 保证
-
软键盘不遮挡：输入框滚动到视口中央再聚焦，或用
scrollIntoView({ behavior: 'smooth', block: 'center' })防止键盘弹出后字段不可见 -
禁用无关填充：验证码、图形校验码等字段，用
autocomplete="off-123"（非标准值）或name="verify_code_random789"断开关联
