如何设计具可用性的网页表单?（6）
作者：党韬 来源：猪窝 发布时间：2010-03-20 21:57:00
当输入框获得焦点时显示提示
复杂的表单一般具有很多不同的输入框,如果显示一些帮助文字,可以让用户填起来更容易.当然，你不想让用户被一个或更多的解释表单文字所湮没。
通过简单的改变，你可以写个JavaScript脚本(或者使用可定制的插件),用类似传统提示的样式显示一个消息,来解释可能产生疑惑的表单元素,或者那种需要要求输入的内容是特殊格式的输入框(比如,只允许用字母和数字组成,并且至少6个字符的用户名)
jQuery Input Floating Hint Box是一个简单的插件,可以在输入框获得焦点时,显示完全可以自定义的浮出提示窗.
DHTML Goodies Form Field Tooltip是另一个对表单中输入内容的交验工具.它会根据表单输入框中的title属性来显示一段帮助文字.
充分的留白
正像前面提到过的,如果表单的元素没有显示以很清晰,友好的方式显示,那么会看上去很丑而且混乱.通常我们认为在网站设计中对留白的使用原则,同样适用于表单,甚至可以一直应用到最小的细节中.
你可以通过以下的方式来改进表单的设计: 在输入框周围增加适当的留白,给元素更大或者更好用的尺寸,或者也可以通过调整CSS中的padding属性来实现输入框内的留白.例如,试着在下面的两个输入框输入些文字.
只是通过调整padding的和尺寸,第二个输入框就有更好用的感觉.当多个文字输入框出现在同一个表单中,这样会让人在整体感觉上产生很大的不同,即使从技术上讲在用户填写表单花费的时间长度上,它并没有产生很大的不同.
同时,这样也能让你在输入框中看到更多字符.尤其是名字输入框,应该为了那些较长的名字提供更大的可见空间.超出的字符,会开始将其他的字符挤出视线,所以最好是有足够的空间来满足那些较长名字的用户,让他们可以更容易的认出错误.通过下面的输入框可以看到较长的名字是如何被截断的.
让你的表单更友好
关于易理解的表单的这个主题可以很容易构成一整篇文章或者更多,但是这有一些小贴士可以确保你的表单更友好并且对于不同的用户来说都可用.
在输入框中都使用title属性,来帮助那些使用屏幕阅读器的用户
如果标签没有围绕在所关联的输入框时,使用for属性来匹配关联的输入框的id.(这样当用户点击label时,焦点也会置入到输入框内.译者注)
通过给每个元素使用tabindex属性来组成一个tab队列(这样键盘使用tab键可以依次切换,译者注)
对于tab队列,使用更大”步长”来增加数字(如使用”10,20,30…”来替代”1,2,3…”),这样将来需要增加时不需要重写所有的tabindex属性
对于复选框和单选框,将标签(label)放到关联元素的后面这样屏幕阅读者访问时,会先读到标签,然后是”复选框”或者”单选框”
使用<optgroup>来组织<select>
使用accesskey属性来支持键盘快捷键
延伸阅读
0
投稿猜你喜欢
- # -*- coding: utf-8 -*- import httplibfrom urllib import urlencodeimpo
- MySQL由于它本身的小巧和操作的高效, 在数据库应用中越来越多的被采用.我在开发一个P2P应用的时候曾经使用MySQL来保存P2P节点,由
本文参加新星计划人工智能(Pytorch)赛道：https://bbs.csdn.net/topics/613989052一、Pytorch- 现如今，各个国家交流密切，通过翻译使我们打破了语言壁垒，而翻译在互联网上的存在也尤为普遍。python中执行翻译操作的包是translate
- 对于熟悉 C/C++ 或 Java 语言的工程师来说，JavaScript 显得灵活，简单易懂，对代码的格式的要求也相对松散。很容易学习，并
- 引言所谓 路由 就是根据不同的 url 地址展示不同的内容或页面形象点 举个栗子??：电话的拨号界面咱们都见过都使用过你输入一串号码，就可以
- pycharm指定python路径，pycharm配置python环境的方法是：1、依次点击【File】、【Project Interpre
- 1、方法说明import cv2 as cvimg1 =cv.imread(filename[, flags])参数说明filename图片
- 一、前言前文是针对普通的字符串数据进行处理。今天，我们要讲解的textwrap库，是对多文本进行处理的库。比如对于段落的缩进，填充，截取等，
- 有时候我们需要关闭print输出信息，我们可以通过控制sys.stdout来实现print输出的开关一个简单的示例如下：import sys
- 本文实例讲述了Python操作Sql Server 2008数据库的方法。分享给大家供大家参考，具体如下：最近由于公司的一个项目需要，需要使
- 1、表中字段区分大小写的设置在使用gorm查询的时候，会出现账户名A和a是一样的情况，是因为mysql默认不区分大小写造成的1.问题产生的原
- //定义编码header( 'Content-Type:text/html;charset=utf-8 ');//Atomh
- php面试题的题目： $a = '/a/b/c/d/e.php'; $b = '/a/b/12/34/c.php&#
- 输入字母验证码，俺觉得特烦，特别还要输入大写字母。于是找到文件并修改成数字验证码。 修改文件 验证码文件位置 include\va
- 游戏玩法根据神庙逃亡，实现一个人躲避僵尸的小游戏，主要的是精灵、精灵组之间相撞、相交的处理。游戏开始随机出现一定的僵尸，随机移动，玩家在一位
- 本文实例为大家分享了bootstrap图片轮播效果的实现代码，供大家参考，具体内容如下<!DOCTYPE html><ht
- 本文实例讲述了Python回文字符串及回文数字判定功能。分享给大家供大家参考，具体如下：所谓回文字符串，就是一个字符串，从左到右读和从右到左
- 今天遇到一个蛮奇怪的问题：当我在控制台中使用 urllib 没问题，但是当我在 vscode 中 .py 文件中导入 urllib 使用时会
- 利用字典dict来完成统计举例：a = [1, 2, 3, 1, 1, 2]dict = {}for key in a: dic
