关于label标签

这是一篇凑字的文章...

标签()是描述表单字段用途的文本.用于提高表单元素的可访问性. label标签里一般都会有for属性, for的值为label关联元素的id值.这样该label就与该字段关联起来了.就像这样:

<label for="first-name">first name:</label>
<input type="text" id="first-name" name="first-name">

如果访问者用鼠标点击标签,与之对应的表单便会自动获得焦点, 这种关联还会让屏幕阅读器将文本标签与相应字段一道念出来, 这样就方便了视力障碍用户对网页的访问.

上述label标签的使用方法是显示关联; label标签还有隐式的关联用法: 就是将表单字段放在一个包含标签文本的label标签内. 显式关联更容易添加样式, 因此使用频率更高. 但隐式用法在包含很多checkbox表单元素的状况下使用比较方便.

<label>First Name: <input type="text" name="first-name"></label>

以上就是label标签的用法. 十分简单. 但有时可能会遇到稍微复杂点的状况,比如这样

表单元素有3个: 从左到右分别是input标签Date of Birth, select标签Month of Birth和input标签Year of birth; 然而左侧可用作label的字段只有"Date of Birsth"一个.

这时候的做法是: 仍然设置3个label标签, 分别对应这3个表单元素, 然而用户能看见的只有Date of Birth标签, 另外两个标签都被设置为宽度为0, 并使用text-indent隐藏(当然,要先设法将它们转成块级元素,width和text-indent设置才会有效). css写起来很容易我就懒得写了...

<div>
  <label for="dateOfBirth">Date of Birth:</label>
  <input name="dateOfBirth" id="dateOfBirth" type="text"  />
  <label id="monthOfBirthLabel" for="monthOfBirth">Month of Birth:</label>
  <select name="monthOfBirth" id="monthOfBirth">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
  </select>
  <label id="yearOfBirthLabel" for="yearOfBirth">Year of Birth:</label>
  <input name="yearOfBirth" id="yearOfBirth" type="text" />
</div>

这样做以后, 用户点击"Date of Birth"标签, 对应的第一个input元素会获得焦点, 后面的Month和Year input元素是无法获得通过鼠标点击获得焦点的. 看上去为这两个元素设置label标签是无用之举, 但是这样做能够方便屏幕阅读器工作, 照顾到视觉障碍人群的使用, 所以还是有必要的.

本文基本摘抄自<精通CSS 高级web解决方案>, 不含原创内容, 以上...