Lewati ke konten utama Lewati ke navigasi dokumen
in English

Label mengambang

Buat label formulir sederhana yang indah yang mengapung di atas bidang input Anda.

Di halaman ini

Contoh

Bungkus sepasang <input class="form-control">dan <label>elemen .form-floatinguntuk mengaktifkan label mengambang dengan bidang formulir tekstual Bootstrap. A placeholderdiperlukan pada masing -masing <input>karena metode label mengambang khusus CSS kami menggunakan :placeholder-shownelemen semu. Perhatikan juga bahwa <input>harus didahulukan agar kita dapat menggunakan pemilih saudara (mis., ~).

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
  <label for="floatingInput">Email address</label>
</div>
<div class="form-floating">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Password</label>
</div>

Ketika ada yang valuesudah ditentukan, <label>s akan secara otomatis menyesuaikan ke posisi melayangnya.

<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputValue">Input with value</label>
</form>

Gaya validasi formulir juga berfungsi seperti yang diharapkan.

<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="[email protected]" value="[email protected]">
  <label for="floatingInputInvalid">Invalid input</label>
</form>

Area teks

Secara default, <textarea>s with .form-controlakan sama tingginya dengan <input>s.

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Comments</label>
</div>

Untuk menyetel ketinggian khusus pada <textarea>, jangan gunakan rowsatribut. Sebagai gantinya, tetapkan eksplisit height(baik sebaris atau melalui CSS khusus).

<div class="form-floating">
  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Comments</label>
</div>

memilih

Selain .form-control, label mengambang hanya tersedia di .form-selects. Mereka bekerja dengan cara yang sama, tetapi tidak seperti <input>s, mereka akan selalu menunjukkan <label>dalam keadaan melayang. Memilih dengan sizedan multipletidak didukung.

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Floating label select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label for="floatingSelect">Works with selects</label>
</div>

Tata Letak

Saat bekerja dengan sistem grid Bootstrap, pastikan untuk menempatkan elemen formulir di dalam kelas kolom.

<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="[email protected]" value="[email protected]">
      <label for="floatingInputGrid">Email address</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid" aria-label="Floating label select example">
        <option selected>Open this select menu</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
      <label for="floatingSelectGrid">Works with selects</label>
    </div>
  </div>
</div>

Kelancangan

Variabel

$form-floating-height:            add(3.5rem, $input-height-border);
$form-floating-line-height:       1.25;
$form-floating-padding-x:         $input-padding-x;
$form-floating-padding-y:         1rem;
$form-floating-input-padding-t:   1.625rem;
$form-floating-input-padding-b:   .625rem;
$form-floating-label-opacity:     .65;
$form-floating-label-transform:   scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-transition:        opacity .1s ease-in-out, transform .1s ease-in-out;