表单是用户向系统传递和修改数据信息的主要方式,同时也是系统获取用户数据、响应反馈结果的主要方式,可以说表单是人机交互中重要的数据媒介。
而表单布局是用户在使用表单提交数据时的第一感观,表单布局分为 [移动端布局] 和 [PC端布局] 。设计者可通过表单布局,将表单字段合理进行分布,提高表单界面使用效率及成员数据填报效率。
![](http://dingyue.ws.126.net/2022/1201/2feac1bcj00rm7j5e004hd0010300emp.jpg)
一、表单布局设置:
列数设置:
更新之后,百数表单布局从仅支持单双列升级为支持单列、双列、三列以及四列这四种排列方式。当遇到字段内容较多的表单,可以设置为三列、四列,减少成员滑动页面填报的频率。
![](http://dingyue.ws.126.net/2022/1201/f8eaffb6j00rm7j5g004ed0010300emp.jpg)
更多设置
列数设置只能将字段布局进行最基础的分割,实际场景中不同的字段需要填报的内容不一样,所需要的宽度也不一样。此时,可以在更多设置中进一步对表单布局进行设置。
在更多设置里可以对字段标题位置、输入框宽度等进行更个性化的设置,支持对 [PC端] 和 [移动端] 分别设置。
![](http://dingyue.ws.126.net/2022/1201/a75f4b8ej00rm7j5j0047d000z600gep.jpg)
注意:
1.原表单属性 [PC端表单布局] 、[移动端表单布局] 功能合并到表单布局内。
2.表单多列布局只在PC端生效,移动端仅支持单列布局。
二、表单布局移动端及PC端:
移动端
移动端设置,字段标题可以设置为 [左右] 和 [上下] 两种位置布局方式。
![](http://dingyue.ws.126.net/2022/1201/bdce2323j00rm7j5l001cd0017n00l7p.jpg)
PC端
1.字段标题位置
字段标题可以设置为 [左右] 和 [上下] 两种位置布局方式。不同的布局方式,其展示的效果也不一样。
![](http://dingyue.ws.126.net/2022/1201/5b823209j00rm7j4z0019d0010300c4p.jpg)
![](http://dingyue.ws.126.net/2022/1201/2d71f307j00rm7j51001jd0010300dfp.jpg)
2.字段标题样式
字段标题样式中,可以对标题的 [宽度] 和 [对齐方式] 进行设置。
![](http://dingyue.ws.126.net/2022/1201/acb002ffj00rm7j53001cd001es00j8p.jpg)
3.字段描述信息样式
字段描述信息可根据需求设置为 [显示] 或者 [隐藏] 。
![](http://dingyue.ws.126.net/2022/1201/43cb028dj00rm7j550019d0015r00glp.jpg)
设置了 [显示] 后,描述信息将直接在输入框下方进行显示;设置 [隐藏] 后,描述信息将以小提示的方式展示,点击提示符号,将弹出对应的描述信息。
![](http://dingyue.ws.126.net/2022/1201/af9c95adj00rm7j56000pd000e4006ip.jpg)
注意:
1.只有当 [字段标题位置] 设置为 [左右] 时方可设置隐藏,否则默认显示在字段标题下方。
2.其中 [分割线] 的字段描述信息始终显示不隐藏。
三、经典使用场景展示:
标题左右排列:
![](http://dingyue.ws.126.net/2022/1201/fc17b9cfj00rm7j58001md0016200hup.jpg)
表单布局——三列:
![](http://dingyue.ws.126.net/2022/1201/e3419ee5j00rm7j59004od000z500f8p.jpg)
表单布局——四列:
![](http://dingyue.ws.126.net/2022/1201/03d753e9j00rm7j5c0053d001hb00nmp.jpg)
热门跟贴