设计或审查表单、输入字段与数据录入界面时，用三层指引 +…

在任何表单、输入框或数据录入 UI 的设计与评审中，让正确输入变容易、错误输入在提交前就暴露出来。

适用场景

解决思路

1. 为每个字段提供三层指引且不要合并它们：helper text 说明「输入什么」、placeholder 展示「格式/示例」、validation 确认「是否正确」。
2. Helper text：放在输入框下方、始终可见、用小号次要文本；用用户视角的平实语言写；控制在一句话内，若需要更多说明就说明字段太复杂或命名有误；不要重复 label 内容（label 写 Email，helper 再写 Enter your email 属冗余）；helper text 不能替代 label，label 仍然必须有。
3. Placeholder：放在输入框内部、输入时消失；使用真实示例值（如 `+358 40 123 4567`）而不是描述性文字（如 `Enter phone number`）；绝不把 placeholder 当 label 用（它会消失，用户失去上下文）；颜色用 `--color-text-secondary` 灰色、比实际输入文字更浅；它是可选的，不是每个字段都需要。
4. Validation 触发时机：默认在 blur（离开字段）时校验，即用户填完再校验；当格式复杂或容易出错时改用实时（on input）校验，例如密码强度、IBAN、VAT number、URL、正则密集字段；提交时再做一次兜底校验，并滚动到第一个错误处。
5. 实时校验在开头必须宽容：不要在用户刚开始输入时就报错；用 300–500ms 防抖，或在出现第一个能确定输入错误的字符之后再显示错误。
6. 提交按钮状态：表单有效时才启用按钮，这是最清晰的 affordance 信号之一；禁用时低对比度、`cursor: not-allowed`，启用时全色、`cursor: pointer`；实现方式为 `<button type="submit" disabled={!isFormValid}>Submit</button>`。
7. 长表单或复杂表单中实时校验不现实时，不要禁用 submit：改为在提交时校验并滚动到错误位置，否则用户不知道缺什么会非常受挫。
8. 提交时的 loading 状态：把按钮文案替换为 spinner 并禁用按钮，防止重复提交。
9. 按固定字段结构排布：`[Label]`（可选字段加 Optional 徽标）→ `[Input]` → `[Helper text：输入什么、格式、约束]` → `[Error message：校验失败时出现在 helper text 下方]`。
10. 用无障碍属性把错误与字段关联：input 上设 `aria-describedby="vat-helper vat-error"` 与 `aria-invalid="true"`，错误文本用 `role="alert"`，helper/error 各有 id。
11. Required vs Optional 只标记少数派：多数字段必填就标可选字段，多数可选就标必填字段；不要只靠颜色，要加文字标签（"Required" 或星号 + 图例）；指示符放在 label 里，而不是只放在 placeholder 或 helper text 中，如 `<label>Email <abbr title="Required">*</abbr></label>` 或 `<label>Phone <span class="badge">Optional</span></label>`。
12. 用 `<fieldset>` + `<legend>` 分组相关字段（语义 HTML，帮助屏幕阅读器播报组上下文）；适用于地址组、支付信息、radio 按钮组、checkbox 组。
13. 为每个输入使用正确的 `type` 以获得浏览器免费校验、合适的移动键盘与自动填充：Email→`type="email"`、Phone→`type="tel"`、URL→`type="url"`、Number→`type="number"`、Password→`type="password"`、Date→`type="date"`、Search→`type="search"`、Colour→`type="color"`。
14. 允许浏览器自动填充，除非有安全要求，不要禁用；为地址、联系方式、支付字段设置正确的 `autocomplete`：`name`、`email`、`tel`、`street-address`、`postal-code`、`cc-number`、`new-password`。
15. 提交前按 12 项检查清单自检：每个字段有可见 label（不只是 placeholder）；helper text 位于输入框下方并说明输入什么；placeholder 展示格式或示例而非描述；简单字段在 blur 校验、复杂字段实时校验；错误信息紧邻出错字段；错误信息通过 `aria-describedby` 关联；在少数派字段上标记必填/可选；短表单在无效时禁用 submit；提交按钮有 loading 态并防重复提交；相关字段用 `<fieldset>` + `<legend>` 分组；所有输入设置正确的 `type`；地址、联系方式、支付字段设置 `autocomplete`。

适用边界 · 注意事项

• 长表单或复杂表单中不适用「禁用提交按钮」，也不适合对每个字段做实时校验——应改为提交时校验并滚动到错误。
• 简单字段（如普通文本、邮箱）不要用实时校验，默认使用 on blur，实时校验只留给密码强度、IBAN、VAT、URL 等复杂格式。
• 没有安全要求时不要禁用浏览器自动填充，也不要依赖 placeholder 充当 label。