网页表单设计的十个戒条

1.填写域提供清晰可理解可视化的标签
填写域是用户填写表单首先会聚焦的地方，类似有用户名/密码等填写信息，用户需要清楚地了解每个空白域需要填写的信息以及格式。一目了然才能做到不厌烦。

information

2.字体大小
一般来说，主字体至少14px大小，16px是安全字体大小。

fontsize

3.合适范围的触摸域
在触摸设备上填写表单的现象越来越常见，Apple一直倡导按钮最小应为44px44px，因为它接近人的手指大小反应的范围。当然如果你在一个长表单中全部使用44px大小的空白域，将会在网页上占据大量空间，因此我建议用32px40px。

Bootstrap默认高度为32px，这是一个很好的基准。

field range

4.合理的输入框大小
每个信息输入框的大小不应该是一致大小，当你在填写邮政编码时，我们知道它是由4-6个数字组成的，因此与用户名的输入框长度相比，它应该更小以达到用户的期望。

input fields

5.浏览器默认的点选框机制
点选框的功能一般是用Javascript库实现的，但现在可以纯粹用SVG和CSS实现。
[SVG animation]可以做到样式很漂亮。但是不易用还是在损害用户的利益。
select2所以使用浏览器默认的选择机制才是合理的。

radio buttons or checkboxes

6.可视化错误提示
应在可视化区域让用户接收错误的信息提示。

error message

7.清晰的可选择区域提示
一般情况下用星号* 提示用户此区域选择性填写。

optional or not optional

8.选择性隐藏不必填写信息
当两部分信息是独立存在时，可以逻辑性地隐藏部分填写信息。例如，在电商环境下，用户的支票地址信息很可能就是用户接收发货的的地址，这时可以隐藏地址这部分输入框的填写，待用户需要时再出现即可。

not needed

9.精简输入信息
尽量避免不必要信息的填写特别是数字。

clear

10.输入样式的提醒
当被要求填写用户名、邮件地址、电话号码等信息时，应给出输入样式的范例。

example

@johan_ronsse