浮動(dòng)標(biāo)簽

浮動(dòng)標(biāo)簽/動(dòng)畫(huà)標(biāo)簽

默認(rèn)情況下，使用標(biāo)簽（label）時(shí)，它們通常出現(xiàn)在輸入字段的頂部：

通過(guò)使用浮動(dòng)標(biāo)簽，您可以在輸入字段內(nèi)插入標(biāo)簽，并在單擊輸入字段時(shí)使它們浮動(dòng)/動(dòng)畫(huà)化：

實(shí)例

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="請(qǐng)輸入電郵地址" name="email">
  <label for="email">電郵</label>
</div>

<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="請(qǐng)輸入密碼" name="pswd">
  <label for="pwd">密碼</label>
</div>

關(guān)于浮動(dòng)標(biāo)簽的注意事項(xiàng)：

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

Textarea

也適用于文本域：

實(shí)例

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

選擇菜單

您還可以在選擇菜單上使用“浮動(dòng)標(biāo)簽”。但是，它們不會(huì)浮動(dòng)/動(dòng)畫(huà)化。標(biāo)簽將始終出現(xiàn)在左上角的選擇菜單內(nèi)：

實(shí)例

<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">選擇列表（選擇一項(xiàng)）：</label>
</div>