Tlula eka nhlokomhaka-nkulu Tlula eka docs navigation
Check
in English

Malebvu lama papamalaka

Endla malebvu ya fomo yo olova yo saseka lama papamalaka ehenhla ka tinsimu ta wena to nghenisa.

Xikombiso

Pfuxeta mpatswa wa <input class="form-control">na <label>swiaki eka .form-floatingku endla leswaku ku va na malebvu lama papamalaka hi tinsimu ta xivumbeko xa matsalwa ya Bootstrap. A placeholderya laveka eka yin’wana na yin’wana <input>tanihileswi ndlela ya hina ya malebvu lama papamalaka ya CSS ntsena yi tirhisaka :placeholder-shownpseudo-element. Nakambe xiya leswaku swi <input>fanele swi ta ku sungula leswaku hi ta kota ku tirhisa xihlawulekisi xa vamakwerhu (xikombiso, ~).

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>

Loko ku ri na lexi valuese xi hlamuseriweke, <label>s yi ta tilulamisela hi yoxe eka xiyimo xa yona xo papamala.

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>

Switayele swa ku tiyisisa fomo na swona swi tirha tanihilaha swi languteriweke hakona.

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>

Tindhawu ta matsalwa

Hi ku tiyimisela, <textarea>s with .form-controlyi ta va yi ri ku tlakuka loku fanaka na <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>

Ku veka ku tlakuka ka ntolovelo eka , ya wena <textarea>, u nga tirhisi rowsxihlawulekisi. Ematshan’weni ya sweswo, veka lexi nga erivaleni height(ku nga ha va endzeni ka layini kumbe hi ku tirhisa CSS ya ntolovelo).

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>

Ku hlawula

Handle ka .form-control, malebvu lama papamalaka ma kumeka ntsena eka .form-selects. Ti tirha hi ndlela leyi fanaka, kambe ku hambana na <input>s, ti ta tshama ti kombisa the <label>eka xiyimo xa yona xo papamala. Hlawula na sizenaswona multiplea swi seketeriwi.

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>

Ku hlaya ntsena tsalwa ro olova

Tilebhele leti papamalaka ti tlhela ti seketela .form-control-plaintext, leswi nga pfunaka eka ku cinca-cinca ku suka <input>eka ntikelo lowu hleriwaka ku ya eka tsalwa ro olova handle ko khumba xivumbeko xa pheji.

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>

Mintlawa yo nghenisa

Tilebhele leti papamalaka na tona ti seketela .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>

Loko u tirhisa .input-groupna ku .form-floatingfambisana na ku tiyisisiwa ka fomo, the -feedbackyi fanele ku vekiwa ehandle ka .form-floating, kambe endzeni ka .input-group. Leswi swi vula leswaku mbuyelo wu ta lava ku kombisiwa hi ku tirhisa javascript.

@
Hi kombela u hlawula vito ra mutirhisi.
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>

Vuandlalo

Loko u tirha na sisiteme ya giridi ya Bootstrap, tiyisisa leswaku u veka swiaki swa fomo endzeni ka titlilasi ta tikholomu.

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

Swilo leswi cinca-cincaka

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