<label>

<label>标签是一个行内元素,提供控件的文字说明,帮助用户理解控件的目的。

  1. <label for="user">用户名:</label>
  2. <input type="text" name="user" id="user">

上面代码中,输入框前面会有文字说明“用户名:”。

<label>的一大优势是增加了控件的可用性。有些控件比较小(比如单选框),不容易点击,那么点击对应的<label>标签,也能选中该控件。点击<label>,就相当于控件本身的click事件。

<label>for属性关联相对应的控件,它的值是对应控件的id属性。所以,控件最好设置id属性。

控件也可以放在<label>之中,这时不需要for属性和id属性。

  1. <label>用户名:
  2. <input type="text" name="user">
  3. </label>

<label>的属性如下。

  • for:关联控件的id属性。
  • form:关联表单的id属性。设置了该属性后,<label>可以放置在页面的任何位置,否则只能放在<form>内部。

一个控件可以有多个关联的<label>标签。

  1. <label for="username">用户名:</label>
  2. <input type="text" id="username" name="username">
  3. <label for="username"><abbr title="required">*</abbr></label>

上面代码中,<input>有两个关联的<label>