Bootstrap5 表单浮动标签学习笔记

1. 概述

Bootstrap5 中的表单浮动标签是一种方便用户填写表单时能够清晰知道每个输入框对应信息的设计。

当一个输入框被聚焦时，其相应的浮动标签会浮动到输入框顶部，并保持在该位置直到输入框失去焦点。这使得用户可以更加自然地理解输入框所代表的内容。

2. 实例

下面我们将用实例来说明如何使用 Bootstrap5 的表单浮动标签功能。

htmlCopy Code
<form>
  <div class="mb-3">
    <label for="exampleFormControlInput1" class="form-label">Email地址</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com" required>
  </div>
  <div class="mb-3">
    <label for="exampleFormControlTextarea1" class="form-label">留言</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" required></textarea>
  </div>
  <button type="submit" class="btn btn-primary">提交</button>
</form>

在上面的示例中，我们创建了一个包含一个 Email 地址输入框和一个留言输入框的表单。输入框的浮动标签都被设置为其相应标签的文本。

当用户点击输入框并开始输入时，其相应的浮动标签将会自动浮动到输入框顶部。如果用户填写错误或者该输入框未填写，则浮动标签会以不同的颜色提示错误。

3. 注意事项

在使用 Bootstrap5 表单浮动标签时，需要注意以下几点：

• 使用 label 标签为每个输入框创建标签，并将其 for 属性设置为相应输入框的 id。
• 所有输入框都必须具有 form-control 类，以便使其能适应 Bootstrap5 的样式。
• 可以使用 placeholder 属性向输入框中提供示例文本。
• 添加 required 属性可以指定该输入框为必填项，并在用户未填写时以不同颜色提示错误。

以上就是 Bootstrap5 表单浮动标签的学习笔记和实例。希望对大家有所帮助！