语义化——表单
文章来自:设计学院 | 发表时间:2007-10-3 21:22:28
Labels - 标签
每个表单的元素都应该有它自己的
label 。
label 标签,可以使用
for 属性连接一个label和表单元素。
标签可以被可视化浏览器渲染成
可以点击的 ,点击后光标会显示在关联的表单元素内。
效果:
注:
name 和
id 都是需要的,
name 是由表单处理用,而
id 是给label做连接用。
Field sets and legends - 分组信息和标题
你能够分组不同的元素,比如说基本信息(姓氏、名字、职位等)或者联系信息(地址、城市、邮编、国家等),使用
fieldset 标签可以实现。
在一个组内,你可以用
legend 标签来设置一个标题。
注:可视化浏览器把fieldset渲染为带边框的,legend一般显示在左上角。
效果:
Option groups - 选项组
optgroup 标签可以给select元素的options分类。需要使用一个
label 属性,在可视化浏览器里,它的属性值会在下拉列表(select)里显示为一个不可选的、缩进标题。
1.
< select name ="country" > 2.
< optgroup label ="Africa" > 3.
< option value ="gam" > Gambia
</ option > 4.
< option value ="mad" > Madagascar
</ option > 5.
< option value ="nam" > Namibia
</ option > 6.
</ optgroup > 7.
< optgroup label ="Europe" > 8.
< option value ="fra" > France
</ option > 9.
< option value ="rus" > Russia
</ option > 10.
< option value ="uk" > UK
</ option > 11.
</ optgroup > 12.
< optgroup label ="North America" > 13.
< option value ="can" > Canada
</ option > 14.
< option value ="mex" > Mexico
</ option > 15.
< option value ="usa" > USA
</ option > 16.
</ optgroup > 17.
</ select >
效果:
Gambia Madagascar Namibia France Russia UK Canada Mexico USA
Navigating fields - 表单内的导航
和链接一样,在没有光标设备(如鼠标)的情况下,表单元素、组也可以自由导航。对于表单内的导航,也可以使用和链接一样的方法,tab导航和快捷键。
accesskey 和
tabindex 属性可以添加到每个独立的表单标签上,比如
input ,甚至是
legend 标签。
< input type ="text" name ="firstName" accesskey ="f" tabindex ="1" />