这是《后台产品设计指南》系列文章的第7篇内容，更多精彩可以点击下方链接查看。
表单是由输入框、文本域、单选框、多选框这些组件组成的，用来保存提交数据。后台的添加、修改操作都属于表单操作，本文会和大家一起梳理下表单设计的相关规范。
一个基础的表单由三部分组成，表单标题、表单组件和表单按钮。其中表单标题不是必须的，可以省略；表单按钮主要包括提交按钮、保存按钮、重置按钮等类型。下面介绍一下表单设计常见的规范。
对齐方式
表单标题对齐方式分为左对齐、右对齐和顶部对齐三种方式。前面两种一般出现在web端，因为web端的空间比较大。内容较多时可以考虑多列，但多列在阅读体验上不够顺畅，需要谨慎使用。
而顶部对齐一般适用于移动端，因为移动端的空间比较小，不适合使用前面两种方式；需要说明的是顶部对齐也是可以用于web端的。
表单验证
表单验证分为前端校验和后端校验，前端校验一般使用即时校验和焦点离开时校验，年龄输入框输入汉字时提示属于即时校验；输入密码，再输入确认密码，光标进入下一个表单组件时提示属于焦点离开时校验。后端校验一般在表单提交后，后端校验会减轻服务器压力，对用户干扰也比较小。
表单验证的类型包括必填验证、长度验证、类型验证等。
必填验证
表单组件组件哪些是必填项一般需要用特殊的样式的来区分，比如红色的星号。可以在表单标题前，也可以在表单标题后。
长度验证
比如文章推送标题不能超过20字，超出的字不能输入。
表单组件设置合理的长度、大小能帮助用户填写准确的内容。比如备注信息就不适合用输入框，而应该用文本域组件。
类型验证
比如用户年龄要输入数字而不是汉字、字母；身份证号码是18位，手机号码是11位数字。
业务校验
比如优惠券发放后一些内容就不能再修改，否在会出错。如果只是前端层面限制不够安全，这样就需要从业务层面进行校验，保证安全性。
提示文字
占位符
占位符是表单组件里面的说明文字，这个说明文字要尽可能的简洁，引导用户来填写表单信息。
占位符文字的类型比较多，比如“请输入账号”、“查询用户姓名/手机号”、“不超过20个字”。占位符文字尽量不要和表单标题一致，比如账号，密码这样的文字。
谷歌的表单组件在点击时占位符文字向上移动，相当于表单标题，同时交互也很有趣，是一个非常好的设计方式。
框外提示文字
一般在组件后面或者下面，帮助用户理解组件是做什么的，有哪些限制条件等。比如图片支持jpg/png格式，大小不能超过5M。
错误提示
用户提交表单时经常会发生错误，比如信息没有填写，填写的信息已经被占用无法输入等等。这个时候需要在界面上给出合理的提示信息，同时引导用户完成正确填写操作。同时在给出提示信息时一定不能丢失当前已经输入的信息。
其他规范
默认值
有些选项可以设置默认值，这样可以节省用户的填写时间。比如是否推送设置一般设置默认值为否，这样避免直接推送打扰用户。
文案的合理性
我们在拟定文案时在简洁的前提下要尽可能地考虑用户体验，比如『填写手机号，方便找回密码』这样的文案就比『不填写手机号，则无法找回密码』效果更友好。
支持键盘交互
表单提交需要考虑使用键盘的场景，比如tab键跳转到下一项，使用方向键选项下拉列表的选项。
表单是后台产品的核心，只有掌握设计规范才能结合使用场景设计出好的表单。建议大家系统地学习表单组件和表单设计规范，结合实际的案例进行拆解分析，这样才能融会贯通。
在写作过程中，如果有意见或者想法，欢迎有兴趣的读者添加我的微信一起交流探索，共同进步。
