表单

概述

表单是一块可采集用户数据的区域，用于创建一个实体或收集信息，需要对输入的数据类型进行校验。通常情况下，表单中会放置一些可以与用户进行交互的元素，如：文本框、按钮、单选框、多选框、下拉列表等。

规范中仅对M尺寸，即高度为32px的表单进行定义常用宽度定义

常用尺寸模组：160px、280px、400px...（以120px递增），公式：W=160+120*n，n∈N

布局：表单项一般在容器中，距离容上下边距建议最小为32px，左右边距建议最小为24px

对齐：一般情况下建议表单标签名称右对齐，表单项在内容区域内左对齐排列

名称：标签名称单行长度建议不超过7个中文字符，特殊情况允许折行处理，折行不建议超过两行

样式：一般情况下标签文字和选项左右排列，如若横向空间较小，或处于布局考虑，可采用上下排列

适配：一般来说建议表单中的表单宽度固定，但部分场景可支持按百分比自适应

填写提示帮助用户识别需要填写的内容。

● A、问号图标：Hover展示更多信息或专业名称的说明，展示气泡提示，鼠标离开气泡消失。Hover时图标颜色由 #00000065% 变化为 #000000 85%。

● B、输入框暗提示：通过字符数提示最大值，输入内容等，输入后提示消失

● C、必填提示：通过星号提示必填字段

● D、下方提示：适用于提示需要常驻的场景，可以有超链接，跳转外部或打开弹出层展示更详细的说明资料

● E、前后缀单位符号：通过框内占位符或辅助信息提示填写规则，如：分割点、计量单位等提示内容格式

表单填写错误时会出现报错，并在表单下方出现错误提示。若原表单下方有提示，则错误提示可以覆盖原提示，表单重新输入时，错误提示变回原提示文案。

如表单中存在多个同类型的组件，建议长度尽量保持一致。至少保障所有同类型的组件宽度一致，宽度取其中最长的一个组件的宽度。

同类型释义：日期选择框与单选框为同类型组件，输入框与选择框为不同类型组件

某些情况下，某些表单项由于用户操作不同，会触发父子级内容的联动，例如：switch打开或者关闭，选择器的选项不同呼出不同的联动效果等。

●联动出现的子级内容用灰色卡片进行包裹，同时下方表单项向下顺移

●若子级还需进行内部分组，则需要分组标题时使用分组标题，没有分组标题时使用分割线

●子级内容若存在多个表单项，间距为16px

表单项过多且无基础常显需求时，可以借助抽屉等容器，对同类型的表单项进行分组收纳