Bootstrap 5 表單浮動標簽

浮動標簽/動畫標簽

默認情況下，使用標簽（label）時，它們通常出現在輸入字段的頂部：

通過使用浮動標簽，您可以在輸入字段內插入標簽，并在單擊輸入字段時使它們浮動/動畫化：

實例

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="請輸入電郵地址" name="email">
  <label for="email">電郵</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="請輸入密碼" name="pswd">
  <label for="pwd">密碼</label>
</div>

親自試一試

關于浮動標簽的注意事項：

<label> 元素必須在 <input> 元素之后，并且每個 <input> 元素都需要 placeholder 屬性（即使未顯示）。

Textarea

也適用于文本域：

實例

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Comment goes here"></textarea>
  <label for="comment">評論</label>
</div>

親自試一試

選擇菜單

您還可以在選擇菜單上使用“浮動標簽”。但是，它們不會浮動/動畫化。標簽將始終出現在左上角的選擇菜單內：

實例

<div class="form-floating">
  <select class="form-select" id="sel1" name="sellist">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <label for="sel1" class="form-label">選擇列表（選擇一項）：</label>
</div>

親自試一試