干好这件事，卷死所有同行
宝，咱前面说完表格相关的，今天咱就一起来聊聊表单相关的。答应我，看下去！
由于B端产品的复杂性，表单往往呈现出字段多类型杂等特点；但是一个糟糕的表单会极大影响用户信息的录入，从而影响整个产品的体验。
表单的介绍
表单的定义
表单在网页中主要负责数据采集功能，是提交数据的一切形式。
表单的构成
标签、输入域、提示信息、动作。
表单的构件解析
标签
标签即可以理解为标题的意思，用简洁的文字让用户知道应该输入的内容；根据标签的所属位置，大致可以分为：顶部标签、左对齐标签、右对齐标签、内联标签、图标标签以及浮动标签，下面我们主要介绍前三个。
顶部标签
与输入域左垂直对齐
- 优点：节省水平空间，标签长度弹性大，可以加快浏览和处理速度。
- 缺点：垂直空间占用比较大，表单项多时需增加页面滚动。
左对齐标签
文字左对齐放置在输入域的左边
- 优点：文字开头按阅读视线对齐，方便用户快速浏览表单；节约垂直空间。
- 缺点：标签与表单域联系不紧密，视觉跳动大，填表不流畅；标签和输入域的弹性长度小。
右对齐标签
文字右对齐放置在输入域的左边
- 优点：明确的视觉关联，有利于用户进行填写，节约垂直空间。
- 缺点：左边标签参差不齐，给通览标签造成障碍，降低表单可读性；标签和输入域的弹性长度小。
输入域
用来采集用户数据信息的入口，包含了文本录入、选框录入以及文件上传3种录入类型，应尽可能的减少用户思考和理解的成本，选择合适的输入域。
由于大家对大部分类型都很熟悉了，我就选择几个大家可能容易忽略的说一说
选择框和复选框(单选框)的选择
当项数比较少的时候，复选框(单选框)是一个更优解；选项全部都列出来，可以按重要程度排列，方便用户查看对比。
善用开关按钮
允许用户在两个相反的状态之间进行选择，如：有效或无效、是或否、开或关等。
提示信息
根据输入流程将用户输入过程分为输入前、输入中、输入后三个阶段，提示信息在输入前发生的称为引导提示，提示信息在输入中/后发生的叫反馈提示。
由于提示信息这块比较简单，输入中和输入后的验证我就不再啰嗦啦。
输入前
其他
输入格式
根据用户的记忆结构（7±2法则），采用合理的格式约束，能够方便用户更快的完成填写，而减少错误出现。主要是手机号码，银行卡号，IP地址等情景。
智能联想-模糊搜索(重要！！！)
当选项过多时，模糊搜索能更加高效，同时也能减少出错率。
动作
“主动作”，如：提交、保存、下一步等；“次动作”，如：取消、撤销、返回等。
可优化的点
当表单的必填项未填写完整时，提交或保存等主按钮一般为灰色状态，不可进行下一步操作，当完成必填信息的填写后，按钮变为高亮，可进行下一步操作（但表单项超过5个时则不建议使用主按钮禁用原则）。
主按钮之后的下一步操作
弹框级别-关闭弹框刷新数据。
页面级别-这里我认为有待探讨，大家可以根据实际情况判别是否需要回到列表页。
表单的交互
就地编辑、弹窗、抽屉、页面跳转以及新开页面。
就地编辑
- 优势：快捷易操作，随时启用与退出，主流程的操作流畅度高。
- 劣势：编辑状态较为隐晦，不宜察觉。
- 适用场景：适用于输入内容较少，适用于频率较低，同时属于主流程分支的场景。
弹框-对话框
- 优势：简单易操作、承载的信息量有较大的弹性空间。
- 劣势：浮层弹窗给主操作流程造成较强的割裂，降低输入的流畅度。
新开页面
- 优势：页面之间相互独立，互补不干扰，可承载的东西较多，适合分步骤或者大表单。
- 劣势：用户的焦点丢失，注意力分散（因为系统中大部分的操作在同一个页面中完成）。
弹框和页面如何选择
当承载的东西较多，适合分步骤或者大表单时建议新开一个页面，当表单数量不多时，可以用弹框。
表单内容组织形式
基本平铺
分组归纳
内容分类归组，便于快速定位，减轻焦虑感和填写压力。适用于一次需要填写很多内容的表单，且不同内容之间存在分类归纳性。
步骤引导
- 优势：任务流程清晰，明确当前用户目标，减少用户负担；及时的反馈校验，也避免填写完成后才发现中间的表单填写有误，降低用户的犯错成本。
- 劣势：无法通篇浏览表单内容，回溯成本高。（这里建议在最后一步的时候增加一块区域可以查看清单或者概要）。
其他
关于“只读”
不可编辑的表单项建议使用“readonly",不要用”disable"。
私货
删除二次确认
- 弹框：需要说明删除信息和影响的情况。
- 弹框：批量选择，且弹框中不再有其他操作。
- 就地确认：不需要过多说明，可简单二次确认。
loading
- 页面级loading：tip描述使用进来描述；例如“数据加载中”。
- 按钮级loading：提交/确定类按钮，点击后需有loading，防止用户多次操作。
- 弹框loading：确定按钮点击后需有loading。
- 表格loading：用表格自带的loading属性。
滚动条
- 表格宽度过长- 滚动条最好出现在表格中，不是在页面级别。
- 弹框过长-滚动条最好出现在弹框中，不是页面级别滚动。
- 避免出现滚动条套娃。
好啦以上就是全部啦！还没看表格的可以看看上一篇哦- 一件事让客户成为你的忠实用户！