表单，主要用于数据采集的功能。通过表单，用户可实现数据的增/删/改，这是展现层一个非常核心的部分。表单暴露给用户有两部分：

表单域：包含文本框、选择框、上传框等用户编辑数据区域。

表单按钮：包括提交按钮、复位按钮和一般按钮。用于数据提交、取消输入、数据填充。

此文旨在归纳表单元件、各元件表现形式、使用场景以及总结表单应用的注意点。

一、表单域

如上所述，表单域包括文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等组成，用于数据的输入、选择、上传。以下将按照输入、选择、上传三种操作方式，分别对各种元件进行说明。

1、文本框

文本框用于收集用户输入数据，按照数据类型的不同，可分为单行文本、多行文本、密码框三种。

-单行文本：一个单行输入框，一般会约束两个方面：一是对字数的约束，一般不超过50个字符（25个汉字）。二是对数据类型的约束，比如只允许输入数字或字母，如QQ登录界面QQ号输入框只允许纯数字。其表现形式如下：

输入框

-多行文本：顾名思义，就是允许多行输入，应用于需要输入大量数据的场景，比如发微博、微信对话输入框等。单纯的数据输入，不涉及任何数据加工编辑，如字号字体等。同时它允许输入较长的文字，一般不超过2000个字符。其表现形式如下：

多行文本

-密码框：此元件应用于密码的输入，一般为单行形式。它可保护某些敏感信息不为在场其他人所看到。对于密码框，用于输入真实的数据，而显示到界面则用*字符表示，表现形式为：

密码框

2、选择框

选择框提供有限的选项供用户选择，相比于文本框，它更能让用户接受。根据要收集数据属性和数据量多寡，可分为单选、复选、下拉选择三种。

-单选：单选框可用于处理一些诸如性别、学历、开关等具有唯一性的场景。单选的选项一般不超过7个，4个以内最佳。它的表现形式如下：

单选

-复选：它允许选择不定数量的选择。和单选一样，复选的数量也有所约束，正常情况不会有超过10个选项的情况。它的表现形式如下：

复选

-下拉选择：当可供选择的数据大于一定量时，页面无法全部展现出来，则下拉选择就登场了。它可以应付省市县、民族、出生日期等信息的场景。它的表现形式如下：

下拉菜单

3、文件上传框：可用于图片、文档、音频、视频上传的场景。上传是较敏感的操作，因此对文件的大小、格式要有严格的限制。它的表现形式如下：

上传

二、表单按钮

表单按钮有提交按钮、复位按钮、一般按钮三种，其表现为一个带边框的文字区域，用于提交、重置表单内容，以及其他表单执行命令。

1、提交按钮

顾名思义，就是将输入数据提交给系统。关于提交按钮，要注意三个点：一是数据校验，确保数据无误；二是数据校验需要一定时间，要有良好的“校验中，请等待”的提示；三是数据提交结果要有反馈，“提交成功”或“提交失败”，以及相关的返回页面。

2、复位按钮

复位按钮不是清空，而是将表单域的数据恢复到最初的状态。它可以是一个按钮，也可以是几个文字，甚至是一个“x”。

复位按钮

3、一般按钮

一般按钮是执行提交、复位操作外的其他表单操作，可应用于发送验证码、数据填充等场景。

一般按钮

三、总结

以上只是归纳了表单元件的基础知识，在实际使用中，这些只能满足基本使用，若要有要良好体验，还要考虑元件的选择、元件多变的形式、数据同异步传输、数据安全的问题。

1、元件的选择要素

-尽量少的字段。初级产品经理总想要尽可满足多种用户、多种场景，导致一份表单字段极多，用户容易产生厌倦。因此必须将字段分层级，核心字段，次要字段，边缘字段，对于核心字段可设置为必填项，次要字段可设置为非必填项，边缘字段可设置一个默认值，并不暴露给用户。例如一个下单操作，用户需要填写收货人信息（姓名、地址、联系方式）、商品信息（数量、规格）、优惠信息（优惠券）、支付（在线支付、货到付款）、收货信息（备注、收货时间）。用户需要同时操作这么多字段才能完成下单操作，因此必须精简，将字段根据产品特性的划分优先级，如收货人信息为核心字段必填，商品信息可在商品页面选择，所以可不做，设为默认值等。

-选择大于输入。相比于选择，输入要使用到键盘，而且操作所需时间过长，因此在能提供选择的情况下，尽量提供选择。

-默认输入。这种情况常见于信息编辑页面，在表单被编译出来后，数据就已经被填充在框中。将可能性最大的内容填充到表单域中，这样可以减少用户输入、选择成本，提交操作效率。

-合理的约束，良好的提示。关于字段约束，一定要符合产品场景，例如用户联系方式，一定要确定是手机号还是座机号，手机号为11位纯数字，若是有涉及到跨国，还要考虑区号的问题。关于这些字段，要以一个合理的方式告知用户，用户在不知情的情况下，错误输入会导致用户对产品印象变差。

2、表单的表现形式一直在变化

基础的表单已经可以满足大部分场景了，但有时一些特殊场景，以及为了更好的用户体验，会将表单的表现形式进行调整。具体可分别两种情况：

-单个表单域的优化。对单一类型的表单域进行优化，具体表现形式为调整文字、添加图片、视频、音频等形式。以下为boss直聘的一个选择身份的功能，本质上是一个单选表单域：

boss直聘选择身份

-组合表单。将多个表单域组合成一个表单域来实现复杂的功能。例如选择地区的级联菜单、下拉多选框等等。以下为淘宝运费模板中选择地区的一个功能，包含复选，级联等

淘宝运费模板选择地区

3、同步与异步

同步和异步，是软件开发的名词，执行提交操作后，在这个操作执行期间页面直接卡住不能操作，并且执行后页面刷新或进行新页面，那就是同步，否则就是异步。通俗地理解是，同步是只有一个服务员在服务你，异步是当你有多个需求时，就会有对应多个服务员服务，确保多个服务能同时进行。目前的开发方式，异步的使用场景也越来越多。

4、数据安全

表单是采集用户数据的功能，用户中有优质用户，当然也就有劣质用户，也可以叫做黑客。这部分人一般都使用表单来达成入侵破坏系统的目的。以下介绍两种预防方法：

-SQL注入：这种情况要对输入框，特别是用户名和密码有严格的约束，不允许输入敏感字符；

-利用文件上传功能注入病毒或木马。这种情况要对上传文件的格式有限制，文档只允许doc或docx，音频可限制为mp3，视频可限制为mp4等。