相关标注与解析见CoDesign：https://codesign.qq.com/workspace/board/GPEpZGAXWm9w3z7

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

交互方式

表单的交互方式分为：原位编辑、气泡卡片、弹窗/抽屉、页面跳转，内容数量、复杂度逐渐增加。

选用原则：
image.png
参照上图做选择，能简单就简单，如能原位编辑则不用气泡卡片，能气泡卡片则不用弹窗/抽屉，能不用弹窗则不用页面跳转。

原位编辑

image.png

气泡卡片

弹窗

image.png
关于弹窗尺寸

  • 宽度：
    • 最大宽度 = calc(85vw)，内容过长时，内容区域出现水平滚动条；
    • 最小宽度为 480px；
    • 最大、最小宽度之间，自适应内容；
  • 高度：
    • 最大高度 = calc(85vh-100px)，内容过多时，内容区域出现垂直滚动条；
    • 最小高度为 200px；
    • 最大、最小高度之间，自适应内容；

image.png
关于间距

  • 内容区域的padding值为24px；
  • 表单标签与表单域之间间距为16px；
  • 为了表单域实现左对齐，所有表单标签的宽度等于最长表单标签的宽度；
  • 表单域的控件宽度（输入框、选择器等）参照 Size 尺寸 里的「表单录入场景适配规则」

抽屉

image.png
关于抽屉尺寸

  • 宽度：
    • 最大宽度为 1000px，超出时内容区域出现水平滚动条；
    • 最小宽度为 480px；
    • 最大、最小宽度之间，自适应内容；
  • 高度：为屏幕高度，内容过多时，内容区域出现垂直滚动条；

关于间距

  • 同弹窗

页面跳转

布局

image.png
由顶部导航、页头以及内容区组成。

页头
image.png

  • 标题：必有项，清晰传达页面的内容；
  • 步骤条：可选项，复杂任务直接存在前后关系、顺序关系时使用；
  • Tab 选项卡：可选项，它与分步骤的区别是 Tab 标签内容之间没有顺序关系，没有关联性，可独立设置；

内容区
image.png

  • 内容区固定宽度为 1270px，两边自适应。
  • 内容较多时，通过卡片的方式对内容进行分组处理，则卡片之间间距为 16px；

置底操作区
image.png

  • 中间部分和内容区一致，固定 1270px，两边自适应；
  • 按钮组放在右侧；

信息层级

image.png
页面的信息层级最多支持六层，即第一层步骤条、第二层Tab 选项卡、第三层卡片分组、第四层纵向导航、第五层标题分组（带分割线）、第六层复杂表单内分组（嵌套、联动等）。

内容区

由标题和表单组成，间距如下：
image.png
其中需要注意的是：

  • 卡片有标题时，padding-top 值为 $wh-spacing-m 即 16px；
  • 无标题时，padding-top 值为 $wh-spacing-xl 即 24px；

表单区域采用24栅格系统，表单标签占3col、表单域占21col：
image.png

示例

image.png

  • 包含输入框、选择器、多选、单选、开关、表格、上传等组件。
  • 输入框、选择器的宽度请详阅 Size 尺寸 里的「表单录入场景适配规则」
  • 详细标注见：CoDesign - WinStack - 规范 - 典型页面模板

用法

基础用法

参照「页面跳转」的示例。

控件组合

输入框、选择器、开关等控件可以按需组合使用以满足业务的需要，如下图示例：
image.png

控件联动

不同选项对应不同的内容，如：image.png
image.png

动态加减

动态增加、减少表单项，如：
image.png

提示信息与反馈校验

image.png

提示信息分为：

  • 占位符：一般为输入格式说明，内容较短；
  • 帮助信息：
    • 图标说明：针对表单标签做名词解释；
    • 文字说明（简短）：针对表单的规则进行说明，适合内容不是很多的情况，更加直观；
    • 文字说明（附带链接）：针对表单的规则进行说明，适合内容很多且比较复杂的情况，点击跳转到新页面或打开弹窗，查看详细的规则说明。如果是跳转链接，要新开浏览器Tab页，而不是当前页面刷新跳转；
  • 校验提示：校验后信息展示在控件下方，帮助信息上方；
  • 必填与选填：用红色星号标记必填；