表单

表单以结构化的方式让用户录入数据并将其传输到系统。

设计目标

减少用户操作成本与心理压力，提升用户流畅度和完成率

使用场景

需要进行数据录入的业务场景，如注册、登录、创建等。

表单构成

1. 标题（必须）：用简洁的词语概括表单内容。
2. 描述（非**必须）：**用简洁的词语描述表单。
3. 标签（**非必须）：**用简洁的词语描述需要数据录入的问题。
4. 输入组件**（必须）**：输入框、选择器、复选框、单选框等（详情见数据录入）
5. 操作**（必须）：**提交数据的操作。

标签

必填与选填

建议先对表单标签进行布局，建议遵循重要顺序。如果可能，请尽量先放置多个必填字段，以缩短用户任务。非必填字段应排在第二位，因为它们不是很重要，用户希望跳过它们。如果非必填字段位于必填字段之间，则用户将花费更多时间扫描表单。

1. 当表单必填项超过总体填写项的百分之七十时，不加前缀「*」，仅在可选填项后增加「可选」。

输入组件

组件宽度

在实际业务中，大部分组件内（输入框、选择器）所需填写内容都存在理想长度，组件的宽度应该向用户暗示所需输入内容的长度来减轻判断负担。在表单的设计上，我们推荐使用按照错落有致的组件宽度：

校验

即时校验

通过前端的即时校验，便于对输入字段进行基础要求的检查，避免用户等到提交时给出一堆的报错信息，通常会出现在输入框的下方。

错误：当发生错误时，将使用错误反馈来描述问题内容，包括如何修复和防止该错误的信息。

警告：当用户输入的数据可能不太恰当，但不会影响系统的底层逻辑的时候出现提示内容，包括系统规则与建议的信息。

成功：当用户填写完成并符合要求时，给予用户成功的反馈。

提交后校验

通过提交操作提交表单时，后台系统会进行整体的数据验证。在触发提交表单后验证发现错误，可使用嵌入式警告提示、底部工具栏来描述问题内容，包括有关如何修复和防止该错误的信息。

1. 嵌入式错误提示会将错误列出在表单顶部，标题和表单之间。一般用于表单长度较短（一屏以内）的情况。

1. 底部工具栏的错误提示会将错误置于界面下方，一般用于表单长度较长的情况。

操作

主次关系

一个操作区只能出现一个主按钮。

用词

请使用具体的动作用词，不要使用诸如「确定」的用词。

布局

容器

承载表单的底部容器。

表单项

单列

适用于业务需求较简单，表单长度为 1～1.5 屏。即可居中对齐，也可居左对齐。（注：同一个产品中，只能用一种对齐方式）如果表单包含多个组，则可用组标题来进行区分。如果要强调某些组非常不同，可用卡片分别承载。

多列

适用于业务需求较复杂，需要大量录入信息的时候，单纯使用单列表单已经造成了用户使用不便时，请使用多列表单。

导航

当表单内容比较多且复杂时，可以使用导航辅助用户理解任务。

锚点

锚点用于分组表单且超过 3 组时使用，便于用户建立心里预期。

步骤条

步骤条用于将具有明确的线性逻辑的大型任务进行分组与拆解，便于用户建立心里预期。