Lumpat menyang isi utama Lumpat menyang pandhu arah docs
in English

Label ngambang

Gawe label formulir sing gampang banget sing ngambang ing kolom input sampeyan.

Ing kaca iki

Tuladha

Bungkus pasangan <input class="form-control">lan <label>unsur .form-floatingkanggo ngaktifake label ngambang nganggo kolom formulir teks Bootstrap. A placeholderdibutuhake ing saben <input>minangka metode label ngambang mung CSS nggunakake :placeholder-shownunsur pseudo. Uga elinga manawa <input>kudu luwih dhisik supaya kita bisa nggunakake pamilih sedulur (contone, ~).

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

Nalika ana sing valuewis ditetepake, <label>s bakal otomatis nyetel posisi floated sing.

<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 uga bisa digunakake kaya sing dikarepake.

<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

Kanthi gawan, <textarea>s karo .form-controlbakal dhuwur padha <input>s.

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

Kanggo nyetel dhuwur khusus ing <textarea>, aja nggunakake rowsatribut kasebut. Nanging, atur eksplisit height(ing baris utawa liwat 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>

Milih

Liyane saka .form-control, label ngambang mung kasedhiya ing .form-selects. Padha bisa ing cara sing padha, nanging ora kaya <input>s, padha bakal tansah nuduhake ing <label>negara floated sawijining. Milih karo sizelan multipleora didhukung.

<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

Nalika nggarap sistem kothak Bootstrap, manawa kanggo nyelehake unsur wangun ing 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>

Sass

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;