中资源
中国品牌形像设计网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
深圳网站建设 广州网站设计 域名注册 上海网站建设 虚拟主机 广州网站建设 广州网页设计 签名设计 虚拟主机 域名注册 品牌形象设计 设计联盟
求创科技
上海网麒科技
中国福网
中国设计秀
亿恩科技
中国设计秀
中国设计秀
当前位置:网络学院首页 >> 设计教程 >> web标准 >> HTML中亲和友好的表单

HTML中亲和友好的表单

来源:中国设计秀    作者:    点击:224     加入收藏
关键字:表单 css WEB标准
中资源

  表单对于残障人士来说是最不容易使用的东西。导航和成文的内容是一种情况,而表单域和信息输入的跳跃又是另一回事儿。因此,为表单增加更多元素,使得表单更易用和更具亲和力未尝不是一个是好注意。

标记
  每一个表单域都应该有一个自己的标记。label标签挑选出来,跟for属性一起与一个表单元素关联。
<form><label for="yourName">Your Name</label> <input type="text" name="yourName" id="yourName" />

  标记为可视化浏览器处理本身使得标记自己可点击增加好处,使相关表单域获得焦点。

  注意:name和id两者都是必须的──name为表单处理该表单域,id为标记关联到表单。

分组与图例说明
  你可以为表单域分组,比如名字(姓,名,头衔等)或者地址(第一行,第二行,县,地区,邮编,国家等)。使用fieldset标签。

  在表单域的分组内,你可以使用legend标签产生图例说明。

注意:可视化浏览器倾向于用围绕在表单组周围的边框来显示,而图例说明打破左上方的边框而显示。
<form action="somescript.htm" > <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>

选项分组
  optgroup标签用于在一个层叠式选择菜单为选项分类,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>

导航域
  像连接,表单域(和表单分组)需要为没有指点设备(比如鼠标)的用户导航。与连接相同的方法也可以用在表单元素上,使得任务更容易──tab逗留和快捷键。

  可以为input和legend等独立表单标签设置accesskey和tabindex属性。

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

0
顶一下
2008-01-27 01:02:00    出处:中国设计秀cnwebshow.com
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口