[翻译]标记语言和样式手册 chapter 5 表单（2）

<label>标签

使用<label>标签提升表单的易用性需要两个步骤,而方法C已经完成这两个步骤了.首先是以<label>将文字说明与相关的表单元素连接在一起,不管是文字输入框(text field),文字区块输入框(text area),单选框(radio),多选框(checkbox)等等都好.方法C在"Name:"与"Email:"标题上使用了<label>标签,把它们与输入资料的元素连接在一起.

第二步则是为<label>标签加上for属性,填上对应输入框的id.

举例来说.在方法C里面,以<label>标签把"Name:"包了起来,并且在for属性里填入与其后面的输入框id相同的值.

<form action="/path/to/script" id="thisform" method="post">
  <p><label for="name">Name:</label> <br />
  <input type="text" id="name" name="name" /></p>
  <p><label for="email">Email:</label><br />
  <input type="text" id="email" name="email" /></p>
  <p><input type="submit" value="submit" /></p>
</form>

为什么要用<lable>?

或许听过其他人说你应该在表单内加上<label>标签.而最重要的问题在于为什么应该要用<label>标签.

建立label / ID的关联能让屏幕阅读器为每个表单元素读出正确的标签,而不收版面排列方法的影响,这是件好事.同时,<label>标签正是为了标记表单栏标签而生,使用这个标签的时候,我们就是在为每个元素说明意义,强化表单的结构.

在处理单选,多选框时使用<label>标签还有个额外的好处,那就是大多数浏览器在使用者点击<label>内文字时也会改变元素的值.这样能为输入元素造成更大的点击区域,让行动不便的使用者更容易填写表单(Mark Pilgrim, "Dive Into Accessibility," http://diveintoaccessibility.org/day_28_labeling_form_elements.html).

举例来说,如果为表单加上一个多选框,让使用者能够选择"记下这些信息",那么我们就能像这样的使用<label>标签了:

<form action="/path/to/script" id="thisform" method="post">
  <p><label for="name">Name:</label><br />
  <input type="text" id="name" name="name" /></p>
  <p><label for="email">Email:</label><br />
  <input type="text" id="email" name="email" /></p>
  <p><input type="checkbox" id="remember" name="remember" />
  <label for="remember">Remember this info?</label></p>
  <p><input type="submit" value="submit" /></p>
</form>

借着以这种方式标记多选框,可以获得两个好处:屏幕阅读器能读出正确的说明文字(就像这个例子一样,文字出现在输入框之后也行),而且能切换多选框的范围变大了,现在切换范围除了多选框本身之外,文字部分也包含在内(大多数浏览器都支持).

图5-5就是这个表单在浏览器中的显示效果.我们特别标示了加大之后的多选框切换范围:

图5-5.把文字包含在切换范围内的多选框

除了表单与段落之外,最后我还想展示另一个标记表单的方式,使用定义清单.

方法D:定义一个表单

<form action="/path/to/script" id="thisform" method="post">
  <dl>
    <dt><label for="name">Name:</label></dt>
    <dd><input type="text" id"name" name="name" /></dd>
    <dt><label for="email">Email:</label></dt>
    <dd><input type="text" id="email" name="email" /></dd>
    <dt><label for="remember">Remember this info?</label></dt>
    <dd><input type="checkbox" id="remember" name="remember" /></dd>
    <dt><input type="submit" value="submit" /></dt>
  </dl>
</form>

最后讨论的表单排版方法,是以定义清单定义每一组说明文字与输入框.这是有点争议的方法.我们在定义清单的原始设计目的的边缘游走,不过这是在近期逐渐普及的方法,同时也只得本书一提.

本书稍后在第8章回深入讨论定义清单.事实上,它们能应用的范围远超过大多是设计师的认知:以<dl>排版表单就是个很棒的例子.

你应该发现了这个范围里面的每组表单说明文字都放在定义名词标签<dt>之内,随后跟着放在定义描述标签<dd>中的表单元素.这么做能将说明文字与表单元素对配起来,并且在不使用任何样式时以浏览器显示的效果见图5-6:

图5-6.以清单定义排版表单的显示效果

根据预设值,大多数可视化浏览器会把<dd>缩进显示在单独一行之内.太棒了,因为这样便不必使用任何多余的<p>或<br />标签了就能让不支持CSS的浏览器显示出容易使用的表单排版效果.