用途:在设计或审查表单、输入框、校验、错误提示、标签、提交流程及任何数据录入界面时,提供一套可执行的规则与检查清单。
主要能力:
- 字段结构:要求 label 的 for 与 input 的 id 一致,设置 name、type、autocomplete、required,并在有提示或错误时使用 aria-describedby。
- 标签与间距:默认标签在输入框上方;标签与输入框间距 4–8px,字段之间 16–24px;不用占位符替代标签。
- 输入尺寸:触摸高度 44–48px,内边距纵向 12px、横向 16px,移动端字号至少 16px,边框对比度不低于 3:1,圆角 4–8px,单行最小宽度 200px。
- 输入类型与自动填充:按数据类型选用 email、tel、number、url、search、date、password 等,并用 inputmode 处理验证码;给出常见 autocomplete 令牌如 email、given-name、one-time-code、current-password、new-password。
- 校验时机:提交时默认校验全部;失焦做格式检查;输入中仅用于密码强度或字数等约束;不在用户未输入前显示错误。
- 错误信息:位于字段下方,需颜色加图标,文案具体可操作,改正前持续显示,配合 aria-live="polite" 与 aria-invalid。
- 提交按钮:使用动作动词(如“创建账户”),点击后禁用并显示加载状态,移动端全宽。
- 必填标记:短表单标记可选字段,长表单标记必填字段并加说明,二者择一。
- 多步表单:8 个字段以上用步骤条,显示进度与步骤名,允许返回并保存进度;每步 3–7 个字段。
- 登录/注册:正确区分 username、current-password、new-password,并提供显示密码开关。
使用方式:按资料中的决策树与审查清单逐项核对;示例代码可直接作为结构参考。
限制:资料未提及安装命令、收费、价格、平台或实际效果数据;部分规范来自 WCAG、HTML 规范、Nielsen Norman、Material 3、Apple HIG 等引用,具体适用性需结合项目判断。