Laktawan sa panguna nga sulud Laktaw sa docs navigation
Check
in English

Naglutaw nga mga label

Paghimo matahum nga yano nga mga label sa porma nga naglutaw sa imong mga input field.

Niini nga panid

Pananglitan

I-wrap ang usa ka parisan sa <input class="form-control">ug <label>mga elemento .form-floatingaron mahimo ang naglutaw nga mga label nga adunay mga field sa textual nga porma sa Bootstrap. A placeholdergikinahanglan sa matag usa <input>kay ang among pamaagi sa CSS-only floating labels naggamit sa :placeholder-shownpseudo-element. Timan-i usab nga ang <input>kinahanglan nga mag-una aron makagamit kami usa ka tigpili sa igsoon (pananglitan, ~).

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>

Kung aduna valuenay gihubit, <label>s awtomatik nga mag-adjust sa ilang gilutaw nga posisyon.

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>

Ang mga istilo sa pag-validate sa porma nagtrabaho usab sama sa gipaabut.

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>

Textareas

Sa kasagaran, <textarea>ang s nga adunay .form-controlparehas nga gitas-on sa <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>

Para magbutang ug custom height sa imong <textarea>, ayaw gamita ang rowsattribute. Hinunoa, pagtakda og klaro height(bisan inline o pinaagi sa custom CSS).

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>

Nagpili

Gawas sa .form-control, ang naglutaw nga mga label anaa ra sa .form-selects. Nagtrabaho sila sa parehas nga paagi, apan dili sama <input>sa s, kanunay nilang ipakita ang <label>sa naglutaw nga kahimtang niini. Gipili nga adunay sizeug multiplewala gisuportahan.

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>

Readonly plaintext

Ang naglutaw nga mga label nagsuporta usab .form-control-plaintext, nga makatabang sa pag-toggle gikan sa usa ka ma-edit <input>ngadto sa usa ka plaintext nga bili nga dili makaapekto sa layout sa panid.

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>

Mga grupo sa input

Ang naglutaw nga mga label nagsuporta usab .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>

Kung gigamit .input-groupug .form-floatingkauban ang pag-validate sa porma, ang -feedbackkinahanglan ibutang sa gawas sa .form-floating, apan sa sulod sa .input-group. Kini nagpasabot nga ang feedback kinahanglang ipakita gamit ang javascript.

@
Palihug pagpili ug username.
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>

Layout

Kung nagtrabaho kauban ang Bootstrap grid system, siguruha nga ibutang ang mga elemento sa porma sulod sa mga klase sa kolum.

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

Mga variable

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