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

例子

将一对 <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>