创建浮动在输入字段上的精美简单的表单标签。

例子

将一对 <input class="form-control"> 和 <label> 元素包裹在 .form-floating 中，以使用 Bootstrap 的文本表单字段启用浮动标签。每个 <input> 都需要一个占位符，因为我们的纯 CSS 浮动标签方法使用 :placeholder-shown 伪元素。另请注意，<input> 必须先出现，以便我们可以使用同级选择器（例如 ~）。

<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>

当已经定义了一个值时，<label>s 会自动调整到它们的浮动位置。

<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
  <label for="floatingInputValue">有值的输入框</label>
</form>

表单验证样式也可以按预期工作。

<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
  <label for="floatingInputInvalid">验证输入框</label>
</form>

文本区域

默认情况下，带有 .form-control 的 <textarea> 将与 <input> 具有相同的高度。

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">留言</label>
</div>

要在 <textarea> 上设置自定义高度，请不要使用 rows 属性。相反，设置一个明确的高度（内联或通过自定义 CSS）。

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">留言</label>
</div>

选择

除了 .form-control，浮动标签仅在 .form-selects 上可用。它们的工作方式相同，但与 <input> 不同的是，它们总是将 <label> 显示为浮动状态。不支持带有大小和多个的选择。

<div class="form-floating">
  <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>

布局

使用 Bootstrap 网格系统时，请确保将表单元素放置在列类中。

<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
      <label for="floatingInputGrid">邮箱地址</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid">
        <option selected>打开这个选择菜单</option>
        <option value="1">三刻拍案惊奇</option>
        <option value="2">三十六计</option>
        <option value="3">两兄弟</option>
      </select>
      <label for="floatingSelectGrid">与下拉选择一起工作</label>
    </div>
  </div>
</div>