html-tag-label

今天我们一起来学习一下html中的label标签。

什么是label？

现实生活中，标签无处不在，比如我们在超市买东西时，商品上都会贴有标签，标签上会标明商品的名称、成分、型号、价格等信息。

Web世界中也有自己的标签，那就是label，它的作用是为控件提供一个说明。以如下登录界面为例，这里的Username和Password就是label，他们表明右侧的输入框分别要输入用户名和密码。label标签的作用就是为控件提供一个标题以说明这个控件的作用。

label标签的使用场景

当然label标签不仅可以用于输入框(input)，还可以用于下拉选择框(select)，单选框(radio)，复选框(checkbox)等控件。

用于下拉选择框

html中使用select + option来完成下拉框的功能。

<div style="padding: 16px; border-radius: 4px; border: 1px solid #ccc;">
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="china">China</option>
    <option value="usa">USA</option>
    <option value="uk">UK</option>
  </select>
</div>

渲染结果如下：

用于单选框

对于单选框（radio button），如果要实现互斥效果（多个radio button只能选择其中一个），必须给这些radio button设置相同的name，比如下面两个radio button的name都设置为gender。

<div style="padding: 16px; border-radius: 4px; border: 1px solid #ccc;">
  <span>Gender: </span>
  <label for="male">
    <input type="radio" id="male" name="gender" value="male"> Male
  </label>
  <label for="female">
    <input type="radio" id="female" name="gender" value="female"> Female
  </label>
</div>

渲染结果如下：

用于复选框

html代码如下：

<div style="padding: 16px; border-radius: 4px; border: 1px solid #ccc">
  <label for="subscribe">Subscribe to newsletter:</label>
  <input id="subscribe" name="subscribe" type="checkbox" />
</div>

渲染结果如下：

如何使用label标签

为控件添加label标签主要有两种方式，一种是使用for/id的方式，另一种是使用嵌套的方式。

使用for/id方式提供label标签

首先，定义控件时，为控件提供一个id属性。
然后，在label标签中添加for属性，指定其值为控件的id属性值。

下面的代码中，我们定义了一个文本框控件，设置其id属性值为username，并为它提供了一个label标签，设置其for属性的值为username。这样，label和控件就关联起来了。

1 2	<label for="username">Username:</label> <input id="username" name="username" type="text" />

使用嵌套方式提供label标签

如果不想使用for/id的形式，那么可以直接用label标签包裹住对应的控件

1
2
3

<label>Username:
  <input type="text" name="username">
</label>

label与控件的顺序

无论使用哪种形式，都可以调整label和控件的先后顺序。

这样写法渲染后label在前，输入框在后。

1 2	<label for="subscribe">Subscribe to newsletter:</label> <input type="checkbox" id="subscribe" name="subscribe">

下面的写法渲染后输入框在前，label在后。

1 2	<input type="checkbox" id="subscribe" name="subscribe"> <label for="subscribe">Subscribe to newsletter:</label>

嵌套方式也一样，这样写选然后输入框在前，label在后。

1
2
3

<label>
  <input type="checkbox" name="subscribe"> Subscribe to newsletter
</label>

而下面这样写选然后label在前，输入框在后。

1
2
3

<label>Subscribe to newsletter 
  <input type="checkbox" name="subscribe">
</label>

在实际编程中，对于input输入框来说，一般label在前面，控件在后面。而对于checkbox来说，一般是控件在前而label在后。

label标签有哪些好处？

使用label标签有哪些好处呢？

增强页面的可访问性，label标签不仅从视觉上为控件提供了标题，也为屏幕阅读器提供了可读的信息，这使得有视力障碍的用户也能更好的理解页面内容。
提供用户体验，label标签扩大了控件的可点击区域，即使用户点击label标签也能触发控件的操作。- 以上面第一个例子username控件为例，即使用户点击label标签username，input控件也能获取焦点。