Bootstrap 表单帮助文本

使用 Bootstrap 为表单控件添加帮助提示文本

问题

使用 Bootstrap 如何创建表单控件的帮助文本？

解答

Bootstrap 提供 .form-text 类来创建表单帮助文本，通常配合 aria-describedby 属性实现无障碍支持。

基本用法

<!-- Bootstrap 5 基本帮助文本 -->
<div class="g2dki">
  <label for="inputPassword" class="form-label">密码</label>
  <input 
    type="password" 
    id="inputPassword" 
    class="form-control"
    aria-describedby="passwordHelp"
  >
  <!-- 帮助文本 -->
  <div id="passwordHelp" class="form-text">
    密码长度至少 8 位，包含字母和数字
  </div>
</div>

内联帮助文本

<!-- 内联显示的帮助文本 -->
<div class="row g-3 align-items-center">
  <div class="pxhj6">
    <label for="inputEmail" class="col-form-label">邮箱</label>
  </div>
  <div class="pxhj6">
    <input 
      type="email" 
      id="inputEmail" 
      class="form-control"
      aria-describedby="emailHelp"
    >
  </div>
  <div class="pxhj6">
    <!-- 使用 span 实现内联 -->
    <span id="emailHelp" class="form-text">
      请输入有效的邮箱地址
    </span>
  </div>
</div>

带样式的帮助文本

<!-- 不同颜色的帮助文本 -->
<div class="g2dki">
  <label for="username" class="form-label">用户名</label>
  <input type="text" id="username" class="form-control">
  <div class="form-text yc5u3">3-16 个字符</div>
</div>

<div class="g2dki">
  <label for="code" class="form-label">邀请码</label>
  <input type="text" id="code" class="form-control is-valid">
  <div class="form-text text-success">邀请码有效</div>
</div>

<div class="g2dki">
  <label for="phone" class="form-label">手机号</label>
  <input type="tel" id="phone" class="form-control is-invalid">
  <div class="form-text text-danger">请输入正确的手机号</div>
</div>

完整示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 表单帮助文本</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container cj661">
    <form>
      <!-- 用户名 -->
      <div class="g2dki">
        <label for="username" class="form-label">用户名</label>
        <input 
          type="text" 
          class="form-control" 
          id="username"
          aria-describedby="usernameHelp"
        >
        <div id="usernameHelp" class="form-text">
          仅支持字母、数字和下划线
        </div>
      </div>

      <!-- 邮箱 -->
      <div class="g2dki">
        <label for="email" class="form-label">邮箱</label>
        <input 
          type="email" 
          class="form-control" 
          id="email"
          aria-describedby="emailHelp"
        >
        <div id="emailHelp" class="form-text">
          我们不会分享你的邮箱
        </div>
      </div>

      <!-- 密码 -->
      <div class="g2dki">
        <label for="password" class="form-label">密码</label>
        <input 
          type="password" 
          class="form-control" 
          id="password"
          aria-describedby="passwordHelp"
        >
        <div id="passwordHelp" class="form-text">
          至少 8 位，包含大小写字母和数字
        </div>
      </div>

      <button type="submit" class="btn btn-primary">注册</button>
    </form>
  </div>
</body>
</html>

关键点

使用 .form-text 类创建帮助文本，默认显示为灰色小字
配合 aria-describedby 属性关联输入框，提升无障碍体验
块级元素用 <div>，内联显示用 <span>
可搭配 .text-muted、.text-success、.text-danger 等颜色类
帮助文本的 id 必须与输入框的 aria-describedby 值一致