Floating Label ng Form ng Bootstrap 5

浮動標籤/動畫標籤

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

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

Mga Halimbawa

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

Subukan Muna Sa Sarili

Mga Nota sa Label na Floating:

<label>Ang elemento ng <label> ay dapat nasa kahihinatnan ng elemento ng <input>, at bawat elemento ng <input> ay dapat magkaroon: placeholder Atributo (kahit hindi lumilitaw).

Textarea

Dapat din sa Text Area:

Mga Halimbawa

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Magpakita dito ang Komento"></textarea>
  <label for="comment">Komento</label>
</div>

Subukan Muna Sa Sarili

Piling Menu

Maaari ka ring gamitin ang "Label na Floating" sa pagpipilian. Subalit, hindi sila lumilipad/ma-animate. Ang label ay palaging magiging nasa itaas na kanang bahagi ng pagpipilian ng menu:

Mga Halimbawa

<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">Piliin ang Listahan ng Piling (Piliin ang isang bagay):</label>
</div>

Subukan Muna Sa Sarili