Bootstrap5 浮动标签

Bootstrap 5 提供了一种名为浮动标签（Floating Labels）的输入框样式，这种样式能够使表单输入更加美观且用户友好。通过使用浮动标签，输入框的标签会在用户输入时自动上浮到输入框上方，从而提供更多的空间用于输入文本。

使用浮动标签

创建浮动标签输入框

为了使用浮动标签功能，你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件。接着，在创建输入框时，只需要在 <input>、<textarea> 或 <select> 元素上添加 form-floating 类，并将标签 (<label>) 放置在输入框之前即可。

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Email address</label>
</div>

自定义浮动标签样式

你可以根据需要自定义浮动标签的样式，包括字体大小、颜色、边距等。例如，你可以通过修改 .form-control::placeholder 来改变浮动标签显示时的样式。

.form-control::placeholder {
  color: #aaa;
  opacity: 1; /* Firefox */
}

使用不同的输入类型

浮动标签不仅适用于文本输入，还可以用于其他类型的输入，如密码、数字、日期等。只需确保将相应的 type 属性添加到输入元素中。

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

在表单中使用浮动标签

当你需要在一个表单中使用多个浮动标签时，可以将它们包裹在一个带有 class="form-floating" 的容器中。这样可以保持一致的样式和布局。

// www.javascriptcn.com code example
<form>
  <div class="form-floating mb-3">
    <input type="text" class="form-control" id="floatingName" placeholder="Name">
    <label for="floatingName">Name</label>
  </div>
  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingEmail" placeholder="Email">
    <label for="floatingEmail">Email</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

响应式浮动标签

浮动标签在不同设备上表现良好，但如果你希望进一步调整其响应式行为，可以通过媒体查询来实现。例如，你可以为小屏幕设备设置不同的字体大小或间距。

@media (max-width: 576px) {
  .form-control::placeholder {
    font-size: 0.8rem;
  }
}

浮动标签的注意事项

虽然浮动标签看起来很酷，但在某些情况下可能会引起一些用户体验问题。例如，如果标签文字较长或者用户需要频繁查看提示信息，浮动标签可能不如静态标签直观。因此，在设计表单时，请考虑目标用户群体的需求和习惯。

实例演示

以下是一个完整的浮动标签表单实例，展示了如何在实际项目中应用浮动标签技术：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5 浮动标签示例</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .form-control::placeholder {
      color: #aaa;
      opacity: 1; /* Firefox */
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <form>
      <div class="form-floating mb-3">
        <input type="text" class="form-control" id="floatingName" placeholder="Name">
        <label for="floatingName">姓名</label>
      </div>
      <div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingEmail" placeholder="Email">
        <label for="floatingEmail">邮箱地址</label>
      </div>
      <div class="form-floating mb-3">
        <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
        <label for="floatingPassword">密码</label>
      </div>
      <button type="submit" class="btn btn-primary">提交</button>
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
</body>
</html>

这个例子展示了如何在 Bootstrap 5 中实现一个简单的带有浮动标签的表单。你可以根据需要进行调整和扩展，以满足项目的具体要求。