HTML label 标签使用

点击 <label> 标签通常会使与之关联的表单控件获得焦点或被激活。
通过正确使用 <label> 标签，可以使表单更加友好和易于使用，同时提高整体的可访问性。

基本用法

<label> 标签通过 for 属性与 id 为 username 的 <input> 元素关联。当用户点击“用户名:”这个标签时，关联的输入框会自动获得焦点。

<label for="username">用户名:</label>
<input type="text" id="username" name="username">

直接嵌套

标签还可以直接包含表单控件，这种方式下无需使用 for 属性和 id 属性。

<label>
  邮箱:
  <input type="email" name="email">
</label>

在这种情况下，点击“邮箱:”文本或文本框的任何部分都会激活文本框。

关联复选框和单选框

<label>
    <input type="checkbox" name="subscribe" value="newsletter">
    订阅新闻
</label>
<br>
性别：      
<input type="radio" name="sex" checked="checked" id="man" />
<label for="man">男</label>
<input type="radio" name="sex" id="woman" />
<label for="woman">女</label>