定义
表单在网页中主要负责不同类型用户的数据采集功能，对于用户来说为了获得想要的东西而要填写的各种个人信息，对于网站系统来说是商户获得不同类型用户数据的途径。
构成
１.标签：即表单要填写的内容，一般都用文字表示，不过现在icon也开始流行了，对于被教育过的用户习惯来说，这一表现方式很简洁。
用人头像的icon表达用户名，用锁表现密码
２.输入框：供用户填写内容的，包含了文本框、密码框、隐藏域、多行文本框、复选框（多选框）、单选框、下拉选择框和文件上传框等。（关于输入框的一些知识，在上一篇文章有讲过，这里就不多说了）
３.按钮或是链接：包括提交按钮、复位按钮、获取验证按钮和一般按钮，进行提交或是跳转。
图中三个都是按钮链接
４.提示帮助信息：即提示用户填写时的注意事项或是帮助用户填写的信息。可以安置在输入框的上面、下面、里面，也可以在右侧，视使用场景为准。现在放在上面的情况相对少一些，有时候输入框上面是标签，而输入框里面、下面、右侧就用的相当频繁了。
５.反馈信息：即针对用户填写的内容进行反馈，是否正确，是否可用。
表单元素构成举例说明图
表单类型
１.注册表单，每个网站几乎都要用户完成注册，来获得数据，了解用户需求的。上面的图就是QQ用户要注册的表单。
注册表单
２.登录表单
百度的登录表单
３.购物表单，因为要填写的信息比较多，现在大多都是内容分组，分步骤的表单方式。
购物表单第一步商品信息确认
４.内容发布表单，比如微薄，说说，日志等的发表。
QQ日志发表的表单
微博发表的表单
表单类型有很多种，再比如市场调查的问卷，心理测试等等，就不一一举例了。
优化表单
１.表单一定要精简，避免过长，减少用户紧张焦虑感，填的时间越长，流失的用户越多。比如有的网站提供了可以用QQ／微信／微博／手机扫码等常用的账号一键登录，特别节省时间。不过也有他的缺陷，想要获得的信息不完整不明确，还需要这些网站的同意，所以对此就有很大的依赖性。下面举两个我特别喜欢的登录和注册表单，方便。
手机扫码登录
可以通过微博／QQ／豆瓣／谷歌／微信账号记册
２.分步骤，可以分解用户的焦虑，利用用户的心理相对轻松的完成表单。这在表单信息内容多的情况下很适合使用。
分步注册
３.清晰的浏览线，表单各个元素构成垂直单一路径，用户可以迅速对问题做出答复，条理清晰，不紊乱。
Etre(www.etre.com)提供的眼动跟踪数据图
４.选择合适的标签对齐方式。标签与输入框对齐的方式有四种：第一种是垂直顶对齐；第二种是水平右对齐；第三种是水平左对齐；最后一种是标签在输入区内部。下面这图对这四种方式描述很形像，顶部对齐，填表时间最短；右对齐方式，尽量减少垂直面积；如果希望用户填表时认真浏览标签，了解仔细考虑表单的每个输入框时，可以采用左对齐方式；简短的输入框用第四种，像登录这种两个输入框的很合适；
图来自b3inside
５.在线验证，比如每填完一项要在线验证是否正确，是否可用；提交表单运行时要提示用户；填完一项要自动跳转到下一项，可以TAB跳转。
６.智能默认，比如用户支付时要填下地址，要默认为之前用的地址；在填写邮箱时自动加下后缀。
PS:其实关于同意条款还是用户操作比较好，要是有问题，责任不在用户方
７.额外添加内容，这种情况就好比企业想要获得更多的用户信息，而又不想给用户造成表单过长的焦虑感，可以相应的添加内容，用户可填可不填。从用户角度来看比如用户对要发表的文章可以添加标签，提高文章的阅读量。
带*号的都是必填的，不带星号的可不填
对表单的优化还有很多其它的，比如加上动态效果，把文字难以理解的信息图像化，动态化。
总之，让用户服最短的时间完成表单的填写，带给用户的是更高效的输入方式，更加轻松愉悦的使用体验，应当将效率放在第一位，然后才是在效率至上的基础上去完善交互视觉的体验细节。
网友评论