HTML 表单标签 - <label>

什么是 <label> 标签？

<label> 是HTML表单中的标签元素，用于为表单控件提供描述性文本，提高表单的可访问性和用户体验。点击 <label> 标签会自动将焦点转移到关联的表单控件上。

基本语法

<label> 标签有两种使用方式：

  1. 将表单控件包含在 <label> 标签内部
  2. 使用 for 属性关联表单控件的 id

示例：

html 
<!-- 方式1：包含表单控件 -->
<label>
  用户名：<input type="text" name="username">
</label>

<!-- 方式2：使用for属性 -->
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">

核心属性

for 属性

for 属性用于关联表单控件的 id，点击 <label> 标签时，焦点会自动转移到关联的控件上。

示例：

html 
<label for="password">密码：</label>
<input type="password" id="password" name="password">

form 属性

form 属性指定 <label> 标签属于哪个表单，值为表单的 id。

示例：

html 
<form id="myForm" action="/submit" method="POST">
  <!-- 表单内容 -->
</form>

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

重要性和优势

使用 <label> 标签有以下几个重要优势：

1. 提高可访问性

  • 屏幕阅读器：屏幕阅读器可以将 <label> 的文本与表单控件关联起来，帮助视力障碍用户理解表单
  • 焦点管理：用户可以通过点击标签来激活控件，对于小控件（如单选按钮、复选框）特别有用

2. 改善用户体验

  • 更大的点击区域：点击标签文本即可激活控件，增大了可点击区域
  • 清晰的视觉关联：标签与控件在视觉上和语义上都相关联，使表单更易于理解

3. 更好的SEO

  • 搜索引擎可以更好地理解表单内容和结构

与不同表单控件配合使用

与文本输入框配合

html 
<label for="name">姓名：</label>
<input type="text" id="name" name="name">

与密码框配合

html 
<label for="pwd">密码：</label>
<input type="password" id="pwd" name="password">

与单选按钮配合

html 
<label for="male">
  <input type="radio" id="male" name="gender" value="male"> 男
</label>
<label for="female">
  <input type="radio" id="female" name="gender" value="female"> 女
</label>

与复选框配合

html 
<label for="agree">
  <input type="checkbox" id="agree" name="agree"> 我同意条款
</label>

与下拉选择框配合

html 
<label for="city">选择城市：</label>
<select id="city" name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
</select>

与文本域配合

html 
<label for="message">留言：</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>

最佳实践

  1. 始终使用 <label>：为所有表单控件提供标签，提高可访问性和用户体验

  2. 使用唯一的 id：确保每个表单控件都有唯一的 id，以便与 <label> 正确关联

  3. 保持标签简洁：标签文本应该简洁明了，清晰描述控件的用途

  4. 考虑布局：将标签与控件在视觉上合理布局，便于用户理解

  5. 使用CSS样式化：通过CSS设置标签的样式，提高表单的视觉效果

示例：

html 
<form action="/register" method="POST">
  <div class="form-group">
    <label for="username">用户名</label>
    <input type="text" id="username" name="username" required>
  </div>
  
  <div class="form-group">
    <label for="email">邮箱</label>
    <input type="email" id="email" name="email" required>
  </div>
  
  <div class="form-group">
    <label for="password">密码</label>
    <input type="password" id="password" name="password" required minlength="6">
  </div>
  
  <div class="form-group">
    <label>
      <input type="checkbox" name="agree" required> 我同意用户协议和隐私政策
    </label>
  </div>
  
  <button type="submit">注册</button>
</form>

CSS样式化

可以使用CSS对 <label> 标签进行样式化，例如：

css 
.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
}

input, select, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

浏览器兼容性

所有现代浏览器都支持 <label> 标签及其常用属性。

总结

<label> 标签是HTML表单中提高可访问性和用户体验的重要元素。通过将标签与表单控件关联，可以使表单更易于理解和使用，特别是对于使用辅助技术的用户。正确使用 <label> 标签是创建高质量、用户友好的表单的关键之一。

最后更新：2026-02-07