Bootstrap5 表单浮动标签

Bootstrap 5 表单浮动标签

学习如何使用Bootstrap 5的表单浮动标签，创建现代化、空间效率高的表单界面，提升用户体验。

开始学习
基础浮动标签 文本域浮动标签 选择框浮动标签 表单验证 输入框组浮动标签 布局和网格 自定义样式 实际应用示例

基础浮动标签

使用.form-floating类创建基础浮动标签。

基础浮动标签示例
<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">邮箱地址</label>
</div>

<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="密码">
  <label for="floatingPassword">密码</label>
</div>
不同类型的输入框
<div class="form-floating mb-3">
  <input type="text" class="form-control" id="floatingText" placeholder="用户名">
  <label for="floatingText">用户名</label>
</div>

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
  <label for="floatingEmail">邮箱地址</label>
</div>

<div class="form-floating mb-3">
  <input type="tel" class="form-control" id="floatingPhone" placeholder="电话号码">
  <label for="floatingPhone">电话号码</label>
</div>

<div class="form-floating">
  <input type="url" class="form-control" id="floatingUrl" placeholder="https://example.com">
  <label for="floatingUrl">网站地址</label>
</div>

文本域浮动标签

使用textarea元素创建带有浮动标签的文本域。

文本域浮动标签示例
<div class="form-floating mb-3">
  <textarea class="form-control" placeholder="留下您的评论" id="floatingTextarea" style="height: 100px"></textarea>
  <label for="floatingTextarea">评论</label>
</div>

<div class="form-floating">
  <textarea class="form-control" placeholder="留下您的评论" id="floatingTextarea2" style="height: 150px"></textarea>
  <label for="floatingTextarea2">详细描述</label>
</div>

选择框浮动标签

使用select元素创建带有浮动标签的选择框。

选择框浮动标签示例
<div class="form-floating mb-3">
  <select class="form-select" id="floatingSelect" aria-label="选择框示例">
    <option selected>请选择...</option>
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
  </select>
  <label for="floatingSelect">工作选项</label>
</div>

<div class="form-floating">
  <select class="form-select" id="floatingSelectGrid" aria-label="选择框网格示例">
    <option selected>请选择...</option>
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">广州</option>
    <option value="4">深圳</option>
  </select>
  <label for="floatingSelectGrid">所在城市</label>
</div>

表单验证

使用Bootstrap的表单验证类与浮动标签结合。

表单验证示例
输入正确！
请输入有效值。
请输入有效的邮箱地址。 
<form class="needs-validation" novalidate>
  <div class="form-floating mb-3">
    <input type="text" class="form-control is-valid" id="floatingValid" placeholder="有效输入" value="正确值" required>
    <label for="floatingValid">有效输入</label>
    <div class="valid-feedback">
      输入正确！
    </div>
  </div>

  <div class="form-floating mb-3">
    <input type="text" class="form-control is-invalid" id="floatingInvalid" placeholder="无效输入" value="错误值" required>
    <label for="floatingInvalid">无效输入</label>
    <div class="invalid-feedback">
      请输入有效值。
    </div>
  </div>

  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingEmailValidation" placeholder="name@example.com" required>
    <label for="floatingEmailValidation">邮箱地址</label>
    <div class="invalid-feedback">
      请输入有效的邮箱地址。
    </div>
  </div>

  <button class="btn btn-primary" type="submit">提交表单</button>
</form>

输入框组浮动标签

将输入框组与浮动标签结合使用。

输入框组浮动标签示例
@
@example.com
$ .00 
<div class="form-floating mb-3">
  <div class="input-group">
    <span class="input-group-text">@</span>
    <input type="text" class="form-control" id="floatingInputGroup" placeholder="用户名">
    <label for="floatingInputGroup">用户名</label>
  </div>
</div>

<div class="form-floating mb-3">
  <div class="input-group">
    <input type="text" class="form-control" id="floatingInputGroup2" placeholder="收件人用户名">
    <span class="input-group-text">@example.com</span>
    <label for="floatingInputGroup2">收件人用户名</label>
  </div>
</div>

<div class="form-floating">
  <div class="input-group">
    <span class="input-group-text">$</span>
    <input type="text" class="form-control" id="floatingInputGroup3" placeholder="金额">
    <span class="input-group-text">.00</span>
    <label for="floatingInputGroup3">金额</label>
  </div>
</div>

布局和网格

在网格布局中使用浮动标签。

网格布局示例
<div class="row g-3">
  <div class="col-md-6">
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingFirstName" placeholder="名字">
      <label for="floatingFirstName">名字</label>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingLastName" placeholder="姓氏">
      <label for="floatingLastName">姓氏</label>
    </div>
  </div>
  <div class="col-12">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingEmailGrid" placeholder="name@example.com">
      <label for="floatingEmailGrid">邮箱地址</label>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingCity" placeholder="城市">
      <label for="floatingCity">城市</label>
    </div>
  </div>
  <div class="col-md-4">
    <div class="form-floating">
      <select class="form-select" id="floatingState" aria-label="选择州">
        <option selected>选择...</option>
        <option>北京</option>
        <option>上海</option>
        <option>广东</option>
      </select>
      <label for="floatingState">省份</label>
    </div>
  </div>
  <div class="col-md-2">
    <div class="form-floating">
      <input type="text" class="form-control" id="floatingZip" placeholder="邮编">
      <label for="floatingZip">邮编</label>
    </div>
  </div>
</div>

自定义样式

使用自定义CSS为浮动标签添加独特的样式。

自定义样式示例
<div class="form-demo custom-floating">
  <div class="form-floating mb-3">
    <input type="text" class="form-control" id="customFloatingInput" placeholder="自定义输入框">
    <label for="customFloatingInput">自定义输入框</label>
  </div>

  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="customFloatingEmail" placeholder="name@example.com">
    <label for="customFloatingEmail">自定义邮箱</label>
  </div>

  <div class="form-floating">
    <select class="form-select" id="customFloatingSelect" aria-label="自定义选择框">
      <option selected>请选择...</option>
      <option value="1">选项一</option>
      <option value="2">选项二</option>
      <option value="3">选项三</option>
    </select>
    <label for="customFloatingSelect">自定义选择</label>
  </div>
</div>

<style>
.custom-floating .form-floating > .form-control:focus ~ label,
.custom-floating .form-floating > .form-control:not(:placeholder-shown) ~ label,
.custom-floating .form-floating > .form-select ~ label {
    color: #6f42c1;
}

.custom-floating .form-floating > .form-control:focus {
    border-color: #6f42c1;
    box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25);
}
</style>

实际应用示例

在实际项目中使用浮动标签的示例。

登录表单示例

用户登录

忘记密码？ 
<div class="form-container">
  <h3 class="mb-4 text-center">用户登录</h3>

  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="loginEmail" placeholder="name@example.com">
    <label for="loginEmail">邮箱地址</label>
  </div>

  <div class="form-floating mb-3">
    <input type="password" class="form-control" id="loginPassword" placeholder="密码">
    <label for="loginPassword">密码</label>
  </div>

  <div class="form-check mb-3">
    <input class="form-check-input" type="checkbox" id="rememberMe">
    <label class="form-check-label" for="rememberMe">
      记住我
    </label>
  </div>

  <button class="btn btn-primary w-100 py-2" type="submit">登录</button>

  <div class="text-center mt-3">
    <a href="#" class="text-decoration-none">忘记密码？</a>
  </div>

  <hr class="my-4">

  <button class="btn btn-outline-secondary w-100" type="button">
    使用其他方式登录
  </button>
</div>
注册表单示例

用户注册

已有账户？ 立即登录 
<div class="form-container">
  <h3 class="mb-4 text-center">用户注册</h3>

  <div class="row g-3">
    <div class="col-md-6">
      <div class="form-floating">
        <input type="text" class="form-control" id="registerFirstName" placeholder="名字">
        <label for="registerFirstName">名字</label>
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-floating">
        <input type="text" class="form-control" id="registerLastName" placeholder="姓氏">
        <label for="registerLastName">姓氏</label>
      </div>
    </div>
    <div class="col-12">
      <div class="form-floating">
        <input type="email" class="form-control" id="registerEmail" placeholder="name@example.com">
        <label for="registerEmail">邮箱地址</label>
      </div>
    </div>
    <div class="col-12">
      <div class="form-floating">
        <input type="password" class="form-control" id="registerPassword" placeholder="密码">
        <label for="registerPassword">密码</label>
      </div>
    </div>
    <div class="col-12">
      <div class="form-floating">
        <input type="password" class="form-control" id="registerConfirmPassword" placeholder="确认密码">
        <label for="registerConfirmPassword">确认密码</label>
      </div>
    </div>
    <div class="col-12">
      <div class="form-floating">
        <select class="form-select" id="registerCountry" aria-label="选择国家">
          <option selected>请选择...</option>
          <option>中国</option>
          <option>美国</option>
          <option>英国</option>
          <option>日本</option>
        </select>
        <label for="registerCountry">国家/地区</label>
      </div>
    </div>
    <div class="col-12">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="registerTerms">
        <label class="form-check-label" for="registerTerms">
          我同意 <a href="#" class="text-decoration-none">服务条款</a> 和 <a href="#" class="text-decoration-none">隐私政策</a>
        </label>
      </div>
    </div>
  </div>

  <button class="btn btn-success w-100 mt-4 py-2" type="submit">注册账户</button>

  <div class="text-center mt-3">
    <span>已有账户？ <a href="#" class="text-decoration-none">立即登录</a></span>
  </div>
</div>
上一章: 输入框组 下一章: 表单验证