后台系统往往需要对各种数据进行录入、管理和维护，所以表单页也是后台系统最最基本的一种页面类型。使用后台系统的用户可能一天之内要频繁的操作表单，所以，设计一个高效的表单页往往能有效提高用户的工作效率。

1.表单的元素

通常来说，一个表单的基本元素包括：标签、输入框、操作按钮、错误or成功提示以及帮助文字5大部分。

1.1标签

标签代表着你的问题，用户会根据你的标签进行内容输入、完成表单，所以务必保证标签简洁、明了、无歧义。

1.1.1展现形式

表单标签的常见展现形式有4种，分别是位于输入框顶部并左对齐、和输入框同行并左对齐、和输入框同行并右对齐、显示在输入框内。

• 位于输入框顶部并左对齐

标签位于输入框上方，并于输入框保持左对齐，这种方式可以保持人眼水平方向集中在一个较小的区域，能帮助用户快速填写，而且不受标签长度的影响，但是占用垂直空间较大，容易将表单拉的很长，比较适用于字段较少的表单。

• 和输入框同行并左对齐

标签和输入框并排显示，且所有标签左对齐，这种方式占用的垂直空间会大大减少，而且左对齐的标签也有利于用户阅读，但是因为各个标签的长度不一致，就需要输入框排布上进行配合，需要输入框在离最长标签一定距离左对齐，这样会导致部分标签和输入框距离很远，不利于用户填写。

• 和输入框同行并右对齐

标签和输入框并排显示，且所有标签都右对齐，这种方式同样占用垂直空间会大大减少，且标签和输入框的距离一致，有利于用户填写，但是因为各个标签的长度不一致，会降低用户的可阅读性。

• 显示在输入框内

标签不单独显示，而是直接显示在输入框内部，这种方式不受垂直空间、标签长度的影响，非常方便用户填写，但是不适用于较长较复杂的表单，因为在输入框内部的标签，随着用户输入字符后就会隐藏，较长或较复杂的表单，用户填到后面往往不记得自己都输入了什么内容项，不利于表单的完成。

但是对于登录这种简单的表单确是非常适合的一种方式。

所以在选择标签的展现形式时，要结合具体情况综合考虑再决定~

1.2输入框

输入框的具体形式多种多样，包括单行输入框、多行输入框、下拉框、单选框、复选框等等。我们需要根据标签的内容仔细考虑，选择合适的输入框，才能保证用户规范输入的同时提高工作效率。常见的控件及操作使用规范可以在element、antdesign平台去查看，平时自己也要注重多积累，才能在要使用的时候快速反应选择。

1.3操作按钮

用户通常是为了某个目的才输入表单，例如保存信息、登录、注册、提交信息、发布商品等等，所以一个完整的表单除了让用户输入信息外，还需要提供操作按钮，帮助用户达到目的。

一个表单通常有主要操作和次要操作，例如一个登录表单，其主要操作即为登录，次要操作包括找回密码、注册等。为了让用户区分主要操作和次要操作，以及引导用户进行主要操作，不同的操作按钮在展现形式上会有所区别，主要有以下几种类型。

• 主要操作和次要操作按钮的视觉形式不同

一般主要操作会使用实心带颜色的按钮，而次要操作一般用空心按钮或者文字链接的形式，在视觉上放大主要操作，弱化次要操作。

• 主要操作和次要操作按钮的位置不同

主要操作按钮一般放在表单最后一个输入框的下方，与输入框左对齐，这是由于用户从上至下填写表单，注意力是沿着表单依次向下的，主操作按钮放在这里正好承接用户表单输入完成后的操作。而次要操作按钮可以选择跟主操作按钮并排，也可以选择放在右上角的位置。

1.4错误或成功提示

用户在填写表单的时候，我们需要给用户一些反馈，告知用户填对或者填错，方便用户及时审视自己填写的内容。

对于某一个具体的输入框，我们可以同时有错误和成功提示，也可以只给出错误提示。对于整个表单的操作，一定需要全局的成功提示，全局的错误提示，在表单整体较长的情况下可以有，如果表单整体较短，可以不用全局的错误的提示。

对于比较复杂的问题，可以在给出错误提示中包含解决办法，帮助用户纠正信息。

1.5帮助文字

对于用户填写表单时经常出现的问题，可以提供一些帮助文字，向用户说明情况及正确的做法。帮助文字一般就近显示在问题出现的地方，例如有问题的标签旁边、输入框内。

对于全局性的帮助文字可以在顶部单独辟出一块区域放置。

2.表单的排布

根据表单内容的多少及属性，一般会使用不同的排布方式，常见的表单排布形式有以下几种：

• 所有内容直接罗列排布

针对内容较少，较简单的表单可以采用直接罗列排布的方式，这种方式简洁直观、便于操作，例如登录表单。

• 内容分组排布

内容较多时，直接罗列排布会给用户造成压力和混乱，这个时候可以对内容进行分组，将相关联的内容放在一组，再按组排布。这样能让用户清晰的了解表单的整体结构，减少用户的填写焦虑。

在分组的的基础上，还可以折叠部分分组的内容，这样对于超长的表单来说，能让用户快速定位到关注的内容上。

• 内部分步排布

对于有明显分步的表单内容，可以让表单信息分步排布，每页只展示当前步骤要填写的内容，当前步骤填写成功后才能继续填写下一步的内容。

分布排布一般需要在顶部给出表单的步骤，以及用户当前所在的步骤，这样才能更好的引导用户填写内容，对用户更友好。

好啦，今天关于表单页的内容就分享到这儿啦，希望能对大家有帮助~