表单类组件是用户录入数据和系统获取数据的重要方式

表单类组件是用户录入数据和系统获取数据的重要方式。多种多样的表单组件类型，可以帮助设计者能找到符合业务场景的数据录入方式，同时帮助用户高效的完成数据录入。

1. 设计原则

• 明确：不同的表单组件实现不同的设计目的，在组件使用上要保持明确，例如数据是用户输入还是选择，要从组件上让用户一眼知晓。
• 友好：友好性可以提升用户操作的愉悦感，针对不同场景任务提供返回、重置、取消、清空等友好性的操作。
• 高效：通过合理的使用组件和组织表单信息，使用户高效的完成表单填写。

2. 输入框

输入较少的字符总数，使用单行的文本框。

3. 文本框

输入较多的字符总数，或一段长篇文本，但不允许用户调整高度，使用多行的文本框。

4. 文本域

输入较多的字符总数，或一段长篇文本，但允许用户调整高度，使用多行的文本域。

5. 复合输入框

输入内容需带单位，或可以选择单位，使用复合输入框。

6. 数字输入框

对用户输入的内容有规定，比如是数字，使用只输入数字的数字输入框。

7. 卡号

输入内容为银行卡卡号。

8. 身份证

输入内容为身份证号码。

9. 金额框

输入内容为金额。

10. 单/多选选择器

允许用户从列表中选择一个或多个选项，且选项数量多于5项，使用单/多选选择器。建议选项按照业务需求进行排序，使用户可以快速找到，并尽量让内容显示完整。

11. 自定义多选选择器

允许用户自定义添加选项。

12. 弹框型选择器

• 列表选项过多，多到几十条以上，全在下拉面板中展示对用户不够友好，可选择弹框型选择器的弹框来承载更多的数据信息。
• 人的记忆程度不同，一部分用户可以通过主动搜索获取选项，一部分用户可以通过在弹窗中直接选择获取选项。

13. 树选择器

• 树形结构层级不深，在2-3级之间。
• 一级节点在5个节点左右，二、三级节点个数相对较少，使用具有树形结构的树选择器。

14. 表格选择器

单一维度信息无法让用户做出选择，需要为用户呈现更多的数据信息才能让用户做出合理判断时，使用可以展示更多数据信息的表格选择器。

15. 级联选择器

• 树形结构层级不深，在2-3级之间。
• 一、二、三级节点个数都相对较多，使用树选择器纵向展示不利于用户查找，建议使用一、二、三级节点分开展示的级联选择器。

16. 日期/时间/日期时间选择器

为用户提供了一种可视化的方式去浏览和选择一个日期、一个时间、一个日期时间或日期范围。

17. 单选框

Radio所有选项默认可见，方便用户在比较中选择，选项不宜过多，一般在2-5个之间，同时会有一个选项处于选中状态。

18. 多选框

Checkbox用于在一组选项可以多选时使用。单个复选框可以表示在两种状态间切换。