Lumpat menyang isi utama Lumpat menyang pandhu arah docs
Check
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, ~).

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>

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

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

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

Kanthi gawan, <textarea>s karo .form-controlbakal dhuwur padha <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>

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

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.

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>

Waca mung plainteks

Label ngambang uga ndhukung .form-control-plaintext, sing bisa migunani kanggo ngowahi saka nilai sing bisa diowahi <input>menyang plaintext tanpa mengaruhi tata letak kaca.

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>

Klompok input

Label ngambang uga ndhukung .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>

Nalika nggunakake .input-grouplan .form-floatingbebarengan karo validasi formulir, -feedbackkudu diselehake ing njaba .form-floating, nanging ing njero .input-group. Iki tegese umpan balik kudu ditampilake nggunakake javascript.

@
Mangga pilih jeneng panganggo.
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

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

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;