Перайсці да асноўнага зместу Перайсці да навігацыі па дакументах
Check
in English

Плывучыя этыкеткі

Стварыце прыгожыя простыя этыкеткі формы, якія плаваюць над вашымі палямі ўводу.

На гэтай старонцы

Прыклад

Абгарніце пару элементаў <input class="form-control">і , каб уключыць плаваючыя цэтлікі з тэкставымі палямі формы Bootstrap. А патрабуецца на кожным , бо наш метад плаваючых этыкетак толькі для CSS выкарыстоўвае псеўдаэлемент. Таксама звярніце ўвагу, што першы павінен быць, каб мы маглі выкарыстоўваць роднасны селектар (напрыклад, ).<label>.form-floatingplaceholder<input>:placeholder-shown<input>~

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>

Калі ёсць valueужо вызначанае, <label>s аўтаматычна прыстасуецца да свайго плаваючага становішча.

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>

Стылі праверкі формы таксама працуюць належным чынам.

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>

Тэкставыя вобласці

Па змаўчанні <textarea>s з .form-controlбудзе такой жа вышыні, як <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>

Каб задаць нестандартную вышыню на вашым <textarea>, не выкарыстоўвайце rowsатрыбут. Замест гэтага ўсталюйце відавочны height(альбо ўбудаваны, альбо з дапамогай карыстацкага 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>

Выбірае

Акрамя .form-control, плаваючыя цэтлікі даступныя толькі на .form-selects. Яны працуюць такім жа чынам, але, у адрозненне ад <input>s, яны заўсёды будуць паказваць <label>у плаваючым стане. Выбірае з sizeі multipleне падтрымліваюцца.

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>

Адкрыты тэкст толькі для чытання

Плаваючыя цэтлікі таксама падтрымліваюць .form-control-plaintext, што можа быць карысным для пераключэння з рэдагуемага <input>на тэкставае значэнне без уплыву на макет старонкі.

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>

Уваходныя групы

Таксама падтрымліваюцца плаваючыя этыкеткі .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>

Пры выкарыстанні .input-groupі .form-floatingразам з праверкай формы -feedbackтрэба размяшчаць па-за межамі .form-floating, але ўнутры .input-group. Гэта азначае, што зваротная сувязь павінна быць паказаная з дапамогай javascript.

@
Выберыце імя карыстальніка.
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>

Макет

Працуючы з сістэмай сеткі Bootstrap, не забудзьцеся размясціць элементы формы ў класах слупкоў.

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>

Сас

Пераменныя

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