表单是用户向产品提供数据的地方，任何多余障碍都可能导致填写失败。该技能主张的设计目标是：让正确输入变得容易，让错误输入在提交之前就变得明显。以下按用途、主要能力、使用方式、适用场景和限制分段整理。
一、用途 用于设计或评审一个表单、输入字段或数据录入界面。它给出的是表单设计的事实性规则与结构建议，而不是具体产品功能说明。
二、主要能力
-
三层引导机制 第一层：辅助文字（Helper Text）。解释需要输入什么，始终显示在输入框下方，使用较小的次要文字。应站在用户视角用平实语言书写；保持一句话，若需要更多说明则说明字段过于复杂或命名有误；不要重复标签内容；辅助文字不能替代标签。 第二层：占位符（Placeholder）。展示格式或示例值，显示在输入框内部，输入时消失。应使用真实示例而非描述，例如用 +358 40 123 4567 而非“输入电话号码”；不得把占位符当作标签；使用次要文字颜色且比实际输入文字更浅；属于可选，并非每个字段都需要。 第三层：校验（Validation）。确认输入是否正确，是最重要的一层。校验时机包括：失焦（离开字段）作为大多数字段的默认方式；实时（输入过程中）用于格式复杂或容易出错的字段，如密码强度、IBAN、增值税号、URL、依赖正则的字段；提交时兜底，捕获遗漏并滚动到第一个错误处。实时校验在起始阶段必须宽容，不要用户一开始输入就报错，可在 300–500ms 防抖后或输入已确定错误时再显示。
-
提交按钮状态 表单有效时启用提交按钮，这是表单设计中最清晰的可用性信号之一。短表单中，字段未完成或无效时按钮禁用、低对比度、cursor 为 not-allowed；全部必填字段有效时按钮启用、全色、cursor 为 pointer。实现示例为 button type="submit" disabled={!isFormValid}。对于长或复杂表单，若实时校验不现实，不要禁用提交按钮，而应在提交时校验并滚动到错误处，因为长表单上禁用提交会让用户无法判断缺什么。提交加载状态：用加载指示替换标签并禁用按钮，防止重复提交。
-
字段结构 字段由标签、输入框、辅助文字、错误消息组成；错误消息在校验失败时显示在辅助文字下方。资料给出包含 label、input、aria-describedby、aria-invalid、helper-text、设置 role="alert" 的错误文本的完整示例结构。
-
必填与选填 标记少数派：若大多数字段必填，则标记选填字段；若大多数字段选填，则标记必填字段。不要仅靠颜色，需加文字标签（Required 或带图例的星号）；指示器应放在标签里，而不是只放在占位符或辅助文字中。
-
字段分组 相关字段应放在 fieldset 与 legend 中，这属于语义化 HTML，有助于屏幕阅读器播报分组上下文。适用于地址组、支付信息、单选按钮组、复选框组。
-
输入类型 使用正确的 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"。移动端 email 类型显示邮件键盘，tel 类型显示数字键盘，属于免费的体验改进。
-
自动填充 允许浏览器自动填充，除非有安全要求，不要禁用。资料给出 autocomplete 值示例：name、email、tel、street-address、postal-code、cc-number、new-password。正确的 autocomplete 值能显著降低回访用户和移动端的填写摩擦。
-
依赖数量的文案 任何措辞取决于数量的字符串都应通过消息目录处理，把数量作为命名占位符。不要在视图中按 count === 1 分支，那种三元写法会把三种英语事实硬编码进去：两种复数形式、在一处分界、数字在名词前。芬兰语会改变名词的格，其他语言可能有三种或更多形式，或把数字放在后面。这个缺陷在翻译前不可见，翻译后则散布在各个视图中。另需注意：翻译界面文案会让所有基于文本的测试选择器依赖语言环境，应在同一次改动中固定测试设置的语言环境。
-
审查清单 资料提供一份清单：每个字段都有可见标签（不只是占位符）；辅助文字位于输入框下方并说明需要输入什么；占位符展示格式或示例而非描述；简单字段失焦时触发校验、复杂字段实时校验；错误消息紧邻出错的字段；错误消息通过 aria-describedby 关联；在少数派字段上标记必填或选填；短表单无效时禁用提交按钮；提交按钮显示加载状态并防止重复提交；相关字段用 fieldset 与 legend 分组；所有输入使用正确的 type；地址、联系方式和支付字段设置 autocomplete；依赖数量的文案通过目录解析并把数量作为占位符，绝不用一/其他三元判断；基于文本选择的测试固定语言环境。
三、适用场景 适合在设计或评审表单、输入字段或数据录入界面时参照，包括需要区分辅助文字、占位符和校验的情形，以及需要处理提交按钮状态、必填标记、字段分组、输入类型、自动填充和多语言文案的场景。
四、限制 资料为设计指南，未提供具体产品的功能清单、收费或价格信息，也未给出可直接运行的完整项目或安装命令（仅含少量 HTML 片段示例）。部分实现细节（如 isFormValid 的具体计算方式、防抖实现、样式变量定义）未在本资料中展开，需结合具体技术栈自行处理。