用对type属性才能触发对应键盘：type="tel"弹数字键盘带*#，type="email"显示@和.com快捷键，type="number"仅作数字引导，type="date"唤起日期选择器；inputmode是补充而非替代，需配合pattern或JS校验。
用对 type 属性，键盘才肯配合你
移动端输入体验差，八成是因为键盘弹错——用户点进电话框，出来的是全键盘；填邮箱时要手动切符号键。这不是用户手残，是你没告诉浏览器该用什么键盘。
-
type="tel"：触发数字键盘，带 *# 和常用分隔符（如 -、空格），适合手机号、固话 -
type="email"：键盘默认显示 @ 和 .com 快捷键，iOS 还会自动补全域名 -
type="number"：纯数字键盘，但注意它允许输入 e、+、-，不适合做金额校验，仅作输入引导 -
type="date"或type="datetime-local"：唤起原生日期选择器，避免手输格式错误（如 2026-08-04 vs 08/04/2026） - 别滥用
type="text"：哪怕字段看起来是“普通文本”，也优先考虑语义化类型，比如搜索框用type="search"，能触发搜索键盘和清空按钮
旧浏览器不支持这些类型？没关系，它们会自动降级为 type="text"，功能不丢，只是少个键盘优化——这是 HTML5 的渐进增强设计，不是兼容性负担。
inputmode 是 type 的补充，不是替代
inputmode 不改变数据类型，只给虚拟键盘“提个醒”。它在 type="text" 或 type="search" 场景下特别有用，比如你有个“邮编”字段，type="text" 无法触发数字键盘，但加个 inputmode="numeric" 就行。
-
inputmode="decimal"：适用于价格、身高、体重等带小数的数值，键盘含小数点（位置依系统 locale 而定） -
inputmode="tel"：比type="tel"更细粒度控制，可用于非 tel 字段但需数字+符号输入的场景（如验证码输入框） -
inputmode="none"：慎用，仅当你自己实现了自定义软键盘（如密码强度可视化输入） - 不要和
type="number"混搭inputmode="numeric"——多余，且部分 Android 浏览器会冲突
它不校验、不限制输入内容，只是提示。所以必须搭配 pattern 或 JS 校验，否则用户仍可粘贴非法字符。
立即学习“前端免费学习笔记（深入）”；
标签、占位符、点击区域，三者不能互相替代
移动端屏幕小，手指大，一个字段出问题，整张表单就卡住。很多团队只改样式，却忽略这三个基础项的实际协作关系。
- 标签（
<label>）必须存在且正确绑定for或包裹控件，否则 VoiceOver 等读屏器无法识别，也影响点击热区 - 占位符（
placeholder）只是辅助，一旦用户开始输入就消失，绝不能当标签用。例如placeholder="请输入11位手机号"可以，但没<label>就不行 - 点击区域至少 44×44px：给
<input>设min-height: 44px，同时用padding扩展内边距，别只靠font-size撑高——小字体+大 padding 才真好点 - 避免 label 在左侧、input 在右侧的横排布局（尤其在小屏），容易因缩放或字体放大导致错位或遮挡
测试时真机点一遍：有没有点到空白处却没聚焦？输入框被软键盘顶走后 label 还看得见吗？这些细节没法靠模拟器发现。
自动填充不是锦上添花，而是转化率关键
用户愿意填表单，往往是因为“这次真的想提交”。但如果要重复输邮箱、地址、姓名，30% 的人会在第二步放弃。浏览器自动填充能力已经很成熟，但需要你按规范“喂”对信号。
- 必设
name属性，且值要语义化：name="email"、name="shipping-postal-code"，而不是name="u1" - 启用
autocomplete：常见值如autocomplete="given-name"、autocomplete="street-address"、autocomplete="cc-expiry"，完整列表参考 WHATWG 标准 - 密码字段务必设
autocomplete="current-password"或autocomplete="new-password"，否则 iOS Safari 可能拒绝保存 - HTTPS 是硬性前提：非 HTTPS 环境下，现代浏览器会禁用敏感字段的自动填充
别指望用户手动开启“自动填充”开关——只要你的字段标记得够准，系统就会主动弹出建议。这背后是操作系统级的地址簿、钥匙串、支付信息整合，不是前端 JS 能模拟的。
最常被忽略的是字段顺序：浏览器按 DOM 顺序匹配 autofill 数据，如果邮箱字段插在姓名中间，可能整个链路就断了。保持逻辑顺序，就是保持可用性。
