Treci la conținutul principal Treceți la navigarea documentelor
Check
in English

Etichete plutitoare

Creați etichete de formular frumos simple, care plutesc peste câmpurile dvs. de introducere.

Pe aceasta pagina

Exemplu

Împachetați o pereche de <input class="form-control">elemente <label>pentru .form-floatinga activa etichetele plutitoare cu câmpurile de formular text ale Bootstrap. A placeholdereste necesar pentru fiecare <input>, deoarece metoda noastră de etichete plutitoare numai CSS utilizează :placeholder-shownpseudo-elementul. De asemenea, rețineți că <input>trebuie să apară pe primul loc, astfel încât să putem utiliza un selector de frați (de exemplu, ~).

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>

Când există valuedeja definit, <label>s se va ajusta automat la poziția lor plutitoare.

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>

Stilurile de validare a formularelor funcționează, de asemenea, conform așteptărilor.

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>

Zonele de text

În mod implicit, <textarea>s cu .form-controlva avea aceeași înălțime cu <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>

Pentru a seta o înălțime personalizată pe <textarea>, nu utilizați rowsatributul. În schimb, setați un explicit height(fie inline, fie prin CSS personalizat).

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>

Selectează

În afară de .form-control, etichetele flotante sunt disponibile numai pe .form-selects. Ele funcționează în același mod, dar spre deosebire <input>de s, ele vor afișa întotdeauna <label>în stare flotantă. Selectează cu sizeși multiplenu sunt acceptate.

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>

Text simplu doar pentru citire

Etichetele flotante acceptă și .form-control-plaintext, ceea ce poate fi util pentru comutarea de la o valoare editabilă <input>la o valoare de text simplu, fără a afecta aspectul paginii.

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>

Grupuri de intrare

Etichetele plutitoare acceptă și .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>

Când se utilizează .input-groupși .form-floatingîmpreună cu validarea formularului, -feedbackar trebui să fie plasat în afara .form-floating, dar în interiorul .input-group. Aceasta înseamnă că feedback-ul va trebui să fie afișat folosind javascript.

@
Vă rugăm să alegeți un nume de utilizator.
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>

Aspect

Când lucrați cu sistemul de grilă Bootstrap, asigurați-vă că plasați elemente de formular în clasele de coloane.

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

Variabile

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