二十一 Forms 可用性

Forms对残疾用户来说并不是最容易的东西,写满内容页面的导航算一个,form区域和输入信息之间是另外一个。所以对form增加一些元素是个非常好的办法。

Labels 标志

每个form 区域应该有它们自己的label。使用label标签分类,使用for属性联合label与form的元素。

<form><label for="yourName">Your Name</label> <input type="text" name="yourName" id="yourName" />...

点击浏览器显示的label区域,焦点便会跑到label联合的form区域。

注意:nameid都必须有。name用来操作form区域,而id用来联系label。

Field sets and legends

你可以为区域建组,比如,名字(姓,名,中间,标题等待)或者地址(第一行,第二行,国家,邮政编码等等)。使用fieldset标签。

在field set里面可以使用legend建legend。

注意:浏览器使用边框包围field sets,而legends打破左边或上面的边框。

<form action="somescript.php" ><fieldset><legend>Name</legend><p>First name <input type="text" name="firstName" /></p><p>Last name <input type="text" name="lastName" /></p></fieldset><fieldset><legend>Address</legend><p>Address <textarea name="address" ></textarea></p><p>Postal code <input type="text" name="postcode" /></p></fieldset>...

option组

optgroup标签用来为select箱子里的options编组。它需要label属性,显示的值在下拉列表里每个组的顶部,不可被选择。

<select name="country"><optgroup label="Africa"><option value="gam">Gambia</option><option value="mad">Madagascar</option><option value="nam">Namibia</option></optgroup><optgroup label="Europe"><option value="fra">France</option><option value="rus">Russia</option><option value="uk">UK</option></optgroup><optgroup label="North America"><option value="can">Canada</option><option value="mex">Mexico</option><option value="usa">USA</option></optgroup></select>

导航区域

像链接一样,form fields(和field sets)需要在没有指向装置(比如鼠标)时导航。和链接的做法一样,使用form元素——tab stopsaccess keys

accesskeytabindex属性运用到form标签上,比如inputlegend标签。

<input type="text" name="firstName" accesskey="f" tabindex="1" />

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索form
, 标签
, 属性
, 元素
, label
, 区域
legend
尼尔森十大可用性原则、十大可用性原则、可用性测试、可用性、可用性 英文,以便于您获取更多的相关知识。

时间: 2016-04-01

二十一 Forms 可用性的相关文章

C#开发WPF/Silverlight动画及游戏系列教程(Game Course):(二十一)

C#开发WPF/Silverlight动画及游戏系列教程(Game Course):(二十一)主位式地图移动模式 是否期待了很久?本节就来个重量级的做为开场白吧:主位式地图移动模式.何谓主位式地图移动模式,即以主角为中心,它的移动带动着所有对象包括地图.物体对象.其他玩家.怪物等等的相对移动,这些对象的移动都是以主角为参照物的.最典型例子莫过于当前流行的MMORPG了,你控制的角色在地图中永远是处于窗口正中心的位置(除了8个角落外),这就是主位式地图移动模式(如下图). 有朋友开始焦躁了:我的妈

二十一世纪最性感的职业:数据科学家

  性感事物方面的权威<哈佛商业评论>宣布,"数据科学家"是二十一世纪最性感的职业.所谓性感,既代表着难以名状的诱惑,又说明了大家都不知道它干的是什么. 不管老板懂不懂数据科学家是干什么的,反正最近几年这个岗位的需求数正在快速攀升,Indeed.com的数据可以为证. 但是其性感在什么地方?什么是数据科学家?他们是科学家吗?还是工程师?程序员?抑或是一个商业决策与创新者的新血统? Indeed.com的数据没有反应出来的一个事实是,尽管这个职业对应的学科在学术界经过长期的酝

Bootstrap &lt;基础二十一&gt;徽章(Badges)

原文:Bootstrap <基础二十一>徽章(Badges) Bootstrap 徽章(Badges).徽章与标签相似,主要的区别在于徽章的边角更加圆滑. 徽章(Badges)主要用于突出显示新的或未读的项.如需使用徽章,只需要把 <span class="badge"> 添加到链接.Bootstrap 导航等这些元素上即可. 下面的实例演示了这点: <!DOCTYPE html> <html> <head> <titl

SQL Server数据库开发的二十一条法则_MsSql

在这里,我不打算介绍使用SQL Server的窍门,也不能提供一个包治百病的方案,我所做的是总结一些经验----关于如何形成一个好的设计.这些经验来自我过去几年中经受的教训,一直来,我看到许多同样的设计错误被一次又一次的重复. 一.了解你用的工具 不要轻视这一点,这是我在这篇文章中讲述的最关键的一条.也许你也看到有很多的SQL Server程序员没有掌握全部的T-SQL命令和SQL Server提供的那些有用的工具. "什么?我要浪费一个月的时间来学习那些我永远也不会用到的SQL命令???&qu

ThinkPHP分页使用例子(二十一)

原文:ThinkPHP分页使用例子(二十一)ThinkPHP分页使用 PHP代码:public function fenye(){$User = M('Leyangjun'); // 实例化User对象import('ORG.Util.Page');// 导入分页类$count      = $User->count();// 查询满足要求的总记录数 $Page       = new Page($count,2);// 实例化分页类 传入总记录数和每页显示的记录数 $show       =

二十一世纪的计算 | 康奈尔大学教授Fred B. Schneider开讲计算机安全

雷锋网(公众号:雷锋网)按:本文根据Fred B. Schneider教授在韩国"Computing in the 21st Century 2016"大会上所做报告<A Science of Cyber – Security?>以及微软亚洲研究院首席研究员刘铁岩博士的解说编辑整理而来,在未改变原意的基础上略有删减. Fred B. Schneider是康奈尔大学计算机科学系系主任及Samuel B. Eckert讲席教授.他是美国科学进步协会(1992年),美国计算机协会

微信小程序把玩(二十一)switch组件

原文:微信小程序把玩(二十一)switch组件 switch开关组件使用主要属性: wxml <!--switch类型开关--> <view>switch类型开关</view> <switch type="switch" checked="true" bindchange="listenerSwitch"/> <!--checkbox类型开关--> <view>checkbo

二十一世纪商业评论

二十一世纪商业评论封面 北京东南五环外,沿地铁亦庄线,出经海路站不远处,可以看到一块已经平整完毕的空地.这个总面积4.5 万平方米的地块,绕行一周大约需15 分钟.不过,虽然空地四周已经围起了绿色铁架,但却看不到任何破土动工的迹象.4 月中旬,本刊记者在现场看到,空荡荡的地面上没有任何告示,只是垒着几垛红砖,一个工人正躺在上面,享受着春日的阳光. 在北京国土资源部门的网站上, 这片空地被标记为"北京经济技术开发区路东区E16C1-1.E16C1-2 地块".2012 年1 月10 日,

SQL Server数据库开发的二十一条法则

在这里,我不打算介绍使用SQL Server的窍门,也不能提供一个包治百病的方案,我所做的是总结一些经验----关于如何形成一个好的设计.这些经验来自我过去几年中经受的教训,一直来,我看到许多同样的设计错误被一次又一次的重复. 一.了解你用的工具 不要轻视这一点,这是我在这篇文章中讲述的最关键的一条.也许你也看到有很多的SQL Server程序员没有掌握全部的T-SQL命令和SQL Server提供的那些有用的工具. "什么?我要浪费一个月的时间来学习那些我永远也不会用到的SQL命令???&qu