Перейти до основного вмісту Перейти до навігації документами
Check
in English

Плаваючі етикетки

Створюйте красиві прості мітки форми, які плавають над вашими полями введення.

На цій сторінці

приклад

Обгорніть пару елементів <input class="form-control">і , щоб увімкнути плаваючі мітки з текстовими полями форми Bootstrap. A є обов’язковим для кожного , оскільки наш метод плаваючих міток лише для 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;