编辑导读：在前一篇文章《B端UI界面交互基本组件-表格》中，一起进修了B端“表格”组件UI设计类型，个中包罗“基本表格”、“分屏加载表格”、“分页加载表格”；并从表格组件的需求场景、内容机关以及交互 *** 等方面临以上组件举办了详尽的类型描写；本日我们继承先容了B端“表单”组件的交互类型。

一、基本表单 1.1 需求场景

需要用户举办相关数据设置，并完成相应数据提交。

1.2 内容机关

按照成果需要，分为表单设置项区域，设置汇总、操纵按钮：

通例设置表单内容区域按照实际内容举办排布，相应机关遵循文本、尺度空间相应类型

表单设置项层级分为：设置分类标签、设置项、设置项子级

设置分类标签：标签文本局左对齐，一般在长表单中只管利用设置分类

设置项：在表单中存在设置分类标签时，设置项内容换行缩进显示；设置项文本标签居左对齐：

设置项子级：设置项子级设置内容与设置项设置内容区域左对齐，设置项子级设置标签居左对齐，以纵向最设置标签占位最长的宽度为准：

表单设置汇总需要按照业务需要与内容项数量确定是否需要显示，一般在通例约定的最小正常显示的判别率下，无法通过一屏将所有设置项内容展示 的表单，发起提供设置汇总展示：

设置汇总内容局左显示，差异设置分类下的设置项用必然的视觉表示举办分组显示（如利用横线）

表单项操纵按钮机关按照表单所处外部情况需要举办调解，通例内容如下:

表单有设置分类项：

表单无设置分类项：

1.3 交互行为

表单初始状态下，表单所有设置项均不执行名目正当性查抄提示，表单设置下发按钮默认配置为禁用状态。

表单中存在必填项未填写会设置项未通过正当性查抄时，表单设置下发按钮置为禁用状态。

当表单中所有必填设置项完成设置且通过名目正当性查抄，表单设置下发按钮置为可用状态。

通事靠山数据有效性校验返回为未通过期，对应设置项状态标注为正当性查抄未通过，设置下发按钮为不行用状态。

点击表单设置下发操纵时，执行表单正当性校验，如表单中有正当性查抄未通过设置项，则自动跳转到顺序之一个不正当设置项，操纵下发终止。

二、全页表单 2.1 需求场景

需要用户举办相关数据设置，并完成像一个数据提交。

表单设置项较多，信息量较大。

表单有较大的可用空间防备内容。

2.2 内容机关

整体区域漫衍与基本表单漫衍沟通。

在整体区域表单横向区域空间较大时，正当性校验法则或增补说明说明可以安排到输入框右侧显示：

表单初始状态下，不执行正当性查抄，表单数据下发操纵按钮默认配置为可用状态：

当表单输入项光标移除时，或点击数据下发或操纵按钮时，举办正当性查抄，标注下不正当设置项，并将光标自动定位到之一个不正当的输入项，操纵按钮保持可用状态：

存在正当性炎症未通过的表单，表单数据不答允下发。

三、总结