用户体验之表单结构

Posted 2020-06-25

在用css写表单结构的时候，添加一些属性，可以让极大地改善用户体验。

1，使用value属性为输入型表单域设置默认值。

2，使用title属性帮助屏幕阅读器用户获得足够的提示信息。

3，当标签（label元素）没有包含所关联的表单域时，可使用for属性来匹配和关联菜单域（绑定id值）。

4，为每个表单域设置tabindex属性。方便用户用tab切换

5，对于复选框和单选按钮来说。将label置于表单域前面，可便于用户先阅读标签说明，再执行操作。

6，使用optgroup元素来组织select列表框中的众多选项，让下拉列表项目一目了然。

7，为表单域定义accesskey属性，方便用户用快捷键快速访问。

8，使用checked属性，把常用的复选框和单选框定义为默认值，避免用户重复操作。

9，使用selected属性，在列表框中把常用选项定义为默认值，同样可以避免用户重复操作。