在 Bootstrap 5 中，浮动标签（Floating Labels）是一种表单标签样式，它使得标签在输入框内浮动，并且在用户开始输入时，标签会浮动到输入框的顶部，提供更加紧凑和现代化的表单布局。

1. 基本浮动标签

要实现浮动标签，你只需将 <label> 标签和输入框包裹在一个 form-floating 类的容器中，并确保标签通过 for 属性与输入框的 id 关联。

<div class="form-floating">
  <input type="text" class="form-control" id="floatingInput" placeholder="Name">
  <label for="floatingInput">Name</label>
</div>
  • .form-floating：包裹输入框和标签的容器类，启用浮动标签功能。
  • <label for="floatingInput">：label 标签与输入框的 id 绑定，确保浮动标签与输入框关联。

2. 浮动标签与多种输入控件

浮动标签不仅限于文本框，它也可以应用于其他表单控件，如密码框、文本域等。

2.1 浮动标签与密码框

<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

2.2 浮动标签与多行文本框

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>
  • <textarea>：这里的浮动标签也应用于多行文本框。

3. 浮动标签与选择框

你可以使用浮动标签与选择框（<select>）组合。

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>
  • <select>：浮动标签可以与下拉选择框一起使用。

4. 浮动标签与禁用控件

即使输入框被禁用，浮动标签仍然会保持原样。

<div class="form-floating">
  <input type="text" class="form-control" id="floatingInputDisabled" placeholder="Disabled input" disabled>
  <label for="floatingInputDisabled">Disabled input</label>
</div>
  • disabled：禁用输入框，但浮动标签仍会在输入框中显示。

5. 浮动标签与占位符

浮动标签会在用户开始输入时浮动到顶部，而占位符则会显示在输入框内，当输入框为空时，浮动标签会覆盖在占位符之上。

<div class="form-floating">
  <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
  <label for="floatingEmail">Email address</label>
</div>
  • placeholder：提供占位符文本，直到用户开始输入。

6. 浮动标签与大小调整

Bootstrap 5 允许你调整浮动标签输入框的大小，包括 sm（小）和 lg（大）等选项。

6.1 小号输入框

<div class="form-floating">
  <input type="text" class="form-control form-control-sm" id="floatingInputSm" placeholder="Small input">
  <label for="floatingInputSm">Small Input</label>
</div>

6.2 大号输入框

<div class="form-floating">
  <input type="text" class="form-control form-control-lg" id="floatingInputLg" placeholder="Large input">
  <label for="floatingInputLg">Large Input</label>
</div>
  • .form-control-sm：小号输入框。
  • .form-control-lg：大号输入框。

7. 浮动标签与验证

Bootstrap 5 支持表单验证，浮动标签可以与表单验证一起使用。以下是一个包含表单验证的浮动标签示例：

<div class="form-floating">
  <input type="text" class="form-control is-invalid" id="floatingInputInvalid" placeholder="Enter your name" required>
  <label for="floatingInputInvalid">Name</label>
  <div class="invalid-feedback">
    Please provide a valid name.
  </div>
</div>
  • .is-invalid：添加验证失败的样式。
  • .invalid-feedback：显示验证失败的反馈信息。

总结

Bootstrap 5 的浮动标签（Floating Labels）提供了一种现代、紧凑的表单设计方式，通过在输入框内浮动的标签为表单提供清晰的视觉指引。使用浮动标签时，可以非常方便地创建简洁且具备良好用户体验的表单布局。你可以将浮动标签应用于各种输入控件（如文本框、密码框、文本域、选择框等），并根据需要自定义大小、样式和验证功能。