Lewati ke konten utama Lewati ke navigasi dokumen
Check
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., ~).

html 
<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.

html 
<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.

html 
<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.

html 
<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).

html 
<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.

html 
<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>

Hanya baca teks biasa

Label mengambang juga mendukung .form-control-plaintext, yang dapat membantu untuk beralih dari nilai yang dapat diedit <input>ke teks biasa tanpa memengaruhi tata letak halaman.

html 
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="[email protected]">
  <label for="floatingEmptyPlaintextInput">Empty input</label>
</div>
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="[email protected]" value="[email protected]">
  <label for="floatingPlaintextInput">Input with value</label>
</div>

Grup masukan

Label mengambang juga mendukung .input-group.

@
html 
<div class="input-group mb-3">
  <span class="input-group-text">@</span>
  <div class="form-floating">
    <input type="text" class="form-control" id="floatingInputGroup1" placeholder="Username">
    <label for="floatingInputGroup1">Username</label>
  </div>
</div>

Saat menggunakan .input-groupdan .form-floatingbersama dengan validasi formulir, -feedbackharus ditempatkan di luar .form-floating, tetapi di dalam .input-group. Ini berarti bahwa umpan balik perlu ditampilkan menggunakan javascript.

@
Silakan pilih nama pengguna.
html 
<div class="input-group has-validation">
  <span class="input-group-text">@</span>
  <div class="form-floating is-invalid">
    <input type="text" class="form-control is-invalid" id="floatingInputGroup2" placeholder="Username" required>
    <label for="floatingInputGroup2">Username</label>
  </div>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>

Tata Letak

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

html 
<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">
        <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;