用途:把表单当作一次对话(提问、错误、成功)来设计,关注可用性与无障碍,而非替换现有表单库。适用于登录、结账、联系、设置、RHF/Zod 或 Next 项目。
主要能力:可见的 <label> 与控件关联(for 或包裹),placeholder 不作 label;错误靠近字段并配合 aria-invalid、aria-describedby;一个主提交按钮,文案用动词,pending 时禁用防重复提交并在按钮内显示文本或 spinner;正确的 autocomplete(email、name、current-password、street-address)与 inputmode;Tab 顺序等于视觉顺序;校验用同一份 schema(如 Zod)在客户端与服务端执行,而非只靠 HTML required。字段结构包含 label、control、可选 helper、error,helper 与错误语义区分。控件覆盖文本、密码(显示/隐藏按钮需命名)、原生 select 或可访问 listbox、可点击 label 的 checkbox/radio(成组用 fieldset/legend)、文件(类型与大小写在 helper)、日期。成功要有明确反馈,网络错误要可操作;布局移动端单列,结账/设置按标题分组。
使用方式:保留仓库现有表单库;按上述规则写 HTML 与交互,并与 typescript-strict、nextjs-server-actions、better-web-interface、better-footers、website-copywriting、authentication-authorization 等技能配合。
限制:本技能是 UX 与 HTML 指导,不是“安装 RHF”的教程;完成标准为 label 可见、错误通过 ARIA 关联、服务端有 schema、提交有 pending、autocomplete 与类型正确、单一 CTA、成功/错误可见、键盘与对比度可用。