Bootrap 5 Label Float Bentuk

Label floating/label animasi

Secara lalai, saat menggunakan label (label), mereka biasanya muncul di atas medan input:

Dengan menggunakan label floating, anda dapat masukkan label di dalam medan input dan menggerakkan/menggerakkan animasi saat mengklik medan input:

Contoh

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Sila masukkan alamat e-mel" name="email">
  <label for="email">E-mel</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="Sila masukkan kata laluan" name="pswd">
  <label for="pwd">Kata Laluan</label>
</div>

Cuba Sendiri

Perhatian tentang label bergerak:

Elemen <label> mesti berada di belakang elemen <input>, dan setiap elemen <input> memerlukan placeholder Properti (walaupun tidak ditunjukkan).

Textarea

Juga untuk medan teks:

Contoh

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Komen di sini"></textarea>
  <label for="comment">Komen</label>
</div>

Cuba Sendiri

Pilihan Menu

Anda boleh menggunakan 'label bergerak' di dalam pilihan menu. Tetapi, mereka tidak akan bergerak/animasi. Label akan selalu muncul di atas kiri pilihan menu:

Contoh

<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">Pilih senarai (pilih satu):</label>
</div>

Cuba Sendiri