如何设计具有高可用性的网页表单

网页表单已经是web设计中讨论最多的元素，一个没有任何表单的网站，就像一滩死水。我们总是需要用到各种表单: 付费需要使用表单; 用户注册或订阅需要使用表单-表单的使用是不会停止的.

尽管在html中,把表单拼凑到一块相当轻易,但是对于可用的,友好的表单来说,编码,制作样式和设计是很难的.在网站的转变中,对于成功转化率,表单始终扮演着很重要的角色,下面的小贴士和文章末尾处提供的源码,应该会对制作和编码页面表单的开发者提供有价值的信息.

两列 VS 一列

这个取决于表单的内容,不过当表单内容相当简单时,通常尽量避免两列布局.

下面是一个很好的简单表单的例子,它将每个标签(label)都放到相关表单元素的上方

这种表单布局的好处有哪些,仅仅是为了反对两列布局?首先,表单的元素具有更大的空间,可以满足今后对于文案的修改.两列布局的表单在这点上会有限 制,甚至可能需要重构整个表单部分才能满足调整的需求.另外一个好处就是看上往不杂乱,在每个标签部分不会有大量的空 白,所以很轻易阅读并且很轻易将标签与输进框联系起来.另外,每个成对的标签/输进框的背景色可以让表单从视觉上看更吸引人.

作为对比,让我们看看下面这个两列布局的表单

尤其是由于左对齐的文字和不明显的颜色,这个表单不具备上一个例子中那种干净的视觉效果.事实上,在标签和输进框之间的垂直空缺多少会分散人的留意力,误以为里面包含了很多个部分,而实际上一个简单的表单在视觉上应该表现的像一个整体.

但是使用两列布局来完成一个清楚的,有条理的效果也不是不可能的,正如下面展示的例子Chapters Indigo Books

清楚有条理的两列布局表单

因此,尽管表单的布局没有明确的规定,但是仍存在有效的原则:包括简单的表单避免使用两列布局;假如使用两列布局则应该让标签右对齐.

让交验的反馈信息在一行中显示

最近Luke Wroblewski在A List Apart中写了一篇关于表单交验的反馈信息放到一行显示的文章.其中提到

jQuery Inline Form Validation, Because Validation is a Mess这篇教程一步一步的先容了如何使 用jquery在信息较多的表单中将反馈信息显示在一行.

Dexagogo提供了一个可以将你的表单交验信息显示在一行的简单的脚本.演示中的例子不是最好的,不过你完全可以按照你需要的来自定义.脚本中 使用了Scriptaculous来实现的渐进渐出的效果.

组织有关联的输进框

在一个较长的表单中,为了增加可用性,你可能会受到一些限制,但是将关联的输进框组织到一起,将表单分割并用可控的视觉化组件表现出来,可以使表单 不那么吓人.这样,表单可以让人感觉更轻易填写,即使填写它可能跟填写没有组织的表单花费的时间一样.

为了将关联的表单组织起来,使用<fieldset>和可选<legend>元素,正如下面的代码一样