表单在网页中主要负责数据采集的功能。像我们平时生活中注册一些东西的时候填写的就是表单。
一、标签的分类：左标签、顶标签、行内标签。
1.左标签：
左标签是比较最常见的一种标签样式。相对节约纵向空间，多用于PC端。
在移动端产品中就会比较占空间，因为手机端的屏宽有限，左标签会占据屏幕较大的空间，此时右边的输入框就可能无法展示完整的信息。还有一种情况，当如果用户输入的信息较长，就会造成信息的展示不完全，因为用户在进行下一步操作之前都会对输入的内容进行再次确认，如果看不到完整的内容，用户就不会进行下一步操作，会造成操作流程的中断。
所以，我们在使用左标签的时候，也要考虑到对多行文本的展示。
2.顶标签：
顶标签，顾名思义，是将标签放在上方，多用于移动端。可以给输入框的内容腾出足够的空间，整体对齐，信息可以更完整的展示，节约横向的空间。
3.行内标签：
行内标签也可以被看成是输入提示，多用于登录login页面，可以极大地节省页面空间。
但有个缺点是，一旦用户点击切换到输入状态时，就看不到标签了。在一些比较需要记忆或无提示的表单中，可能会导致用户迷茫，酌情使用。
二、对齐方式
对齐方式一般分为两种：左对齐和右对齐。
左对齐：
左对齐方式是一般适用于浏览表单，阅读效率高。
优点——易于阅读，可以一定程度上帮助用户理解标签内容。一般较常用的使用场景是详情的陈列。
缺点——增大了标签与表单域之间的距离，尤其是标签较长时，距离会更远；导致用户不得不花更多的时间对照标签与相应的表单域以防止出错。
右对齐：
右对齐也是常说的冒号对齐。
优点——相对来说更有利于表单填写，标签指向明确，操作效率高。
缺点——标签的左侧无法对齐，而我们的阅读习惯一般是从左往右阅读，这就会导致用户视觉起点不一样，不利于用户阅读浏览；还有一种情景是，标签内容多，出现折行的情况会更加不利于阅读。
三、交互方式
表单的交互方式一般分为4类：原位编辑，气泡卡片，弹窗/抽屉，页面跳转。
原位编辑：
原位编辑就是编辑内容也为展示内容，主要的使用场景是需要及时修改且比较高频的操作。适用于数目不太多的情景。
常见的交互形式为：点击字段即时编辑、选择编辑功能来编辑
气泡卡片：
当承载内容比较少的时候，所见即所得。常用于系统顶部右上角操作的情景。
弹窗/抽屉：
常用于轻量化编辑的时候，可采用弹窗/抽屉的形式展现。如果在原有基础上有增加项，就可以使用抽屉的方式展现。一般情况下，同类型的操作推荐使用同样的交互方式，这样可以保持交互一致性。
页面跳转：
非常常用的方式，适用于大部分表单。适合涉及录入内容比较多的时候，有大量的信息，构架复杂，建议跳转到新的页面进行操作。
这些交互方式并不绝对，设计师们要结合实际项目的使用场景、用户习惯等具体因素，再进行选择。
四、布局
由于B端本身业务的复杂性，设计师们有时候会遇到信息量很大但又要在一个界面里展示的情况，这个时候就可以将相关内容进行分类组合，增加界面的呼吸和节奏感，把冗长的信息合理展示，从而帮助用户更轻松的完成表单填写。
一般有四种方法：标题分组、卡片分组、tab切换、分步骤。
标题分组
根据业务属性，把相关内容进行分类组合，比如修改个人资料的场景下，基本信息是一组，联系方式是一组。
卡片分组
在标题分组的基础上，通过物理位置的区分，用视觉上的色块和距离等加强分类，方便用户填写。
tab切换
在内容更多、并且内容之间没有太多关联性的场景下，可以使用tab切换的方式，将不同的内容隐藏在各个选项卡内，当前显示所选的选项卡的内容，分类明确。
分步骤
这个跟tab切换的区别是，这边的内容多，但内容之间是有关联的，必须要进行完这一步才能进入下一步。这个时候可以考虑将表单分成多个步骤，同时使用进度条来显示剩余的进度，这样流程会更清晰，能保证每一步填写时都满足了上一步，不易出错。
五、易用性
信息降噪
必填内容一般用红色「*」来表示，但如果必填内容居多，非必填居少，其实不用满屏星星，可以转换思维，少量的非必填项注明「非必填」就好了，如图
高效智能
可自动获取的，无需用户手动填写，自动匹配显示信息，比如邮箱后缀等。
准确易懂
当我们设计表单内部提示信息的时候，出现问题后，明确告知出错的原因并提供有效的解决方案，方便用户修改。
由于B端产品本身的特性，集成了很多的功能和信息，所以在设计的过程中要尽可能的让界面更直观清晰，合理分组布局，信息降噪，更方便用户进行操作，节约时间，提升用户体验。
