Перейти к основному содержанию Перейти к навигации по документам

Floating labels (плавающие метки)

Плавающие метки (Floating labels) — это удобный способ сделать формы более компактными и современными, позволяя метке (label) перемещаться внутри поля ввода. Это полезно для повышения читаемости и улучшения пользовательского опыта.

Ниже подробно описано, как использовать плавающие метки в Bootstrap 5, с примерами, рекомендациями и дополнительными разъяснениями.

На этой странице

Что такое плавающие метки?

Плавающая метка — это элемент, который изначально отображается внутри текстового поля (или textarea) как подсказка. Когда пользователь начинает ввод текста, метка "плавает" вверх, оставаясь видимой над полем ввода.

Основные преимущества:

  • Компактность: экономит пространство формы.
  • Эстетика: выглядит современно и привлекательно.
  • Понятность: пользователю сразу видно, какое поле он заполняет.

Базовая реализация (пример)

В Bootstrap 5 плавающие метки создаются с помощью классов form-floating. Пример базового кода:

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
  <label for="floatingInput">Адрес электронной почты</label>
</div>
Результат:

Объяснение кода:

  1. form-floating: оборачивает поле ввода и метку, чтобы включить плавающий эффект.
  2. form-control: класс Bootstrap для стилизации полей ввода.
  3. placeholder: нужен для правильного отображения метки, но его текст не будет виден.
  4. label: метка, связанная с полем через атрибут for (должен совпадать с id у <input>).

Если value уже определён, <label> автоматически подстраивается под его положение.

<form class="form-floating">
  <input type="email" class="form-control" id="floatingInputValue" placeholder="name@example.com" value="test@example.com">
  <label for="floatingInputValue">Ввод со значением</label>
</form>
Результат:

Стили проверки формы (валидация) также работают.

<form class="form-floating">
  <input type="email" class="form-control is-invalid" id="floatingInputInvalid" placeholder="name@example.com" value="test@example.com">
  <label for="floatingInputInvalid">Недопустимый ввод</label>
</form>
Результат:

Поддерживаемые элементы

  • <input>: текстовые поля, email, пароли и т. д.
  • <textarea>: для больших объемов текста.

Ограничения

Не рекомендуется использовать с элементами select. Для выпадающих списков стоит использовать другие подходы.

Примеры использования

Поле для ввода пароля (input type="password")

<div class="form-floating mb-3">
  <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
  <label for="floatingPassword">Пароль</label>
</div>
Результат:

Поле для текстовой области (textarea)

По умолчанию, <textarea> с .form-control будет иметь ту же высоту, что и <input>.

<div class="form-floating">
  <textarea class="form-control" placeholder="Оставьте комментарий здесь" id="floatingTextarea"></textarea>
  <label for="floatingTextarea">Комментарии</label>
</div>
Результат:

Чтобы задать собственную высоту для <textarea>, не используйте атрибут rows. Вместо этого задайте явное значение height. (Встроенное или с помощью пользовательского CSS).

<div class="form-floating">
  <textarea class="form-control" placeholder="Оставьте комментарий здесь" id="floatingTextarea2" style="height: 100px"></textarea>
  <label for="floatingTextarea2">Комментарии</label>
</div>
Результат:

Выпадающие списки (select)

Помимо .form-control, плавающие метки доступны только в .form-select. Они работают так же, но, в отличие от <input>, всегда отображают <label> в плавающем состоянии. Выделение с помощью size и multiple не поддерживается.

<div class="form-floating">
  <select class="form-select" id="floatingSelect" aria-label="Пример выбора плавающей метки">
    <option selected>Откройте это меню выбора</option>
    <option value="1">Один</option>
    <option value="2">Два</option>
    <option value="3">Три</option>
  </select>
  <label for="floatingSelect">Работает с выбранными</label>
</div>
Результат:

Несколько плавающих меток в одной форме

<form>
  <div class="form-floating mb-3">
    <input type="text" class="form-control" id="floatingName" placeholder="Ваше имя">
    <label for="floatingName">Имя</label>
  </div>
  <div class="form-floating mb-3">
    <input type="email" class="form-control" id="floatingEmail" placeholder="name@example.com">
    <label for="floatingEmail">Электронная почта</label>
  </div>
  <div class="form-floating">
    <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
    <label for="floatingPassword">Пароль</label>
  </div>
</form>
Результат:

Отключенные поля (disabled)

Добавьте логический атрибут disabled к элементу ввода, текстовому полю или выбору, чтобы сделать его неактивным, убрать события указателя и предотвратить фокусировку.

<div class="form-floating mb-3">
  <input type="email" class="form-control" id="floatingInputDisabled" placeholder="name@example.com" disabled>
  <label for="floatingInputDisabled">Адрес электронной почты</label>
</div>
<div class="form-floating mb-3">
  <textarea class="form-control" placeholder="Оставьте комментарий здесь" id="floatingTextareaDisabled" disabled></textarea>
  <label for="floatingTextareaDisabled">Комментарии</label>
</div>
<div class="form-floating mb-3">
  <textarea class="form-control" placeholder="Оставьте комментарий здесь" id="floatingTextarea2Disabled" style="height: 100px" disabled>Disabled textarea with some text inside</textarea>
  <label for="floatingTextarea2Disabled">Комментарии</label>
</div>
<div class="form-floating">
  <select class="form-select" id="floatingSelectDisabled" aria-label="Плавающая метка отключена, выберите пример" disabled>
    <option selected>Откройте это меню выбора</option>
    <option value="1">Один</option>
    <option value="2">Два</option>
    <option value="3">Три</option>
  </select>
  <label for="floatingSelectDisabled">Работает с выбранными</label>
</div>
Результат:

Открытый текст только для чтения

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

<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingEmptyPlaintextInput" placeholder="name@example.com">
  <label for="floatingEmptyPlaintextInput">Пустой ввод</label>
</div>
<div class="form-floating mb-3">
  <input type="email" readonly class="form-control-plaintext" id="floatingPlaintextInput" placeholder="name@example.com" value="name@example.com">
  <label for="floatingPlaintextInput">Ввод со значением</label>
</div>
Результат:

Входные группы (input-group)

Также поддерживаются плавающие метки в .input-group.

<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="Имя пользователя">
    <label for="floatingInputGroup1">Имя пользователя</label>
  </div>
</div>
Результат:
@

При использовании .input-group и .form-floating вместе с проверкой формы -feedback следует размещать вне .form-floating, но внутри .input-group. Это означает, что обратная связь будет отображаться с помощью JavaScript.

<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="Имя пользователя" required>
    <label for="floatingInputGroup2">Имя пользователя</label>
  </div>
  <div class="invalid-feedback">
    Пожалуйста, укажите имя пользователя.
  </div>
</div>
Результат:
@
Пожалуйста, укажите имя пользователя.

Планировка и пользовательские стили

Работа с сеткой

При работе с системой сеток Bootstrap обязательно размещайте элементы формы в классах столбцов.

<div class="row g-2">
  <div class="col-md">
    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInputGrid" placeholder="name@example.com" value="mdo@example.com">
      <label for="floatingInputGrid">Адрес электронной почты</label>
    </div>
  </div>
  <div class="col-md">
    <div class="form-floating">
      <select class="form-select" id="floatingSelectGrid">
        <option selected>Откройте это меню выбора</option>
        <option value="1">Один</option>
        <option value="2">Два</option>
        <option value="3">Три</option>
      </select>
      <label for="floatingSelectGrid">Работает с выбранными</label>
    </div>
  </div>
</div>
Результат:

Изменение цвета фона и текста

Чтобы изменить фон или текст поля ввода, используйте утилиты Bootstrap:

<div class="form-floating mb-3">
  <input type="text" class="form-control bg-light text-dark" id="floatingCustom" placeholder="Custom field">
  <label for="floatingCustom">Кастомное поле</label>
</div>
Результат:

Добавление рамок

<div class="form-floating mb-3">
  <input type="text" class="form-control border border-primary" id="floatingBorder" placeholder="Border field">
  <label for="floatingBorder">Поле с рамкой</label>
</div>
Результат:

Адаптивность и кроссбраузерность

Плавающие метки в Bootstrap 5 полностью адаптивны и поддерживают основные современные браузеры. Однако, чтобы убедиться, что дизайн корректно работает в старых версиях браузеров, рекомендуется тестировать готовый код.

Советы для адаптивности:

  • Используйте утилиты отступов (mb-3, mt-2 и т. д.) для управления расстояниями между элементами.
  • Тестируйте на устройствах с различной шириной экрана./li>

Советы и рекомендации

  1. Проверяйте читаемость текста меток: убедитесь, что метка остается читаемой даже на тёмном фоне.
  2. Используйте placeholder: даже если он не виден, он помогает обеспечить правильную работу эффекта.
  3. Проверка доступности (accessibility): убедитесь, что атрибуты id и for правильно настроены для работы с экранными считывателями.
  4. Не злоупотребляйте: плавающие метки лучше подходят для минималистичных форм. Если форма сложная, можно использовать более традиционные подходы.

CSS

Переменные Sass

scss/_variables.scss

$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-height:            1.5em;
$form-floating-label-opacity:           .65;
$form-floating-label-transform:         scale(.85) translateY(-.5rem) translateX(.15rem);
$form-floating-label-disabled-color:    $gray-600;
$form-floating-transition:              opacity .1s ease-in-out, transform .1s ease-in-out;

Часто задаваемые вопросы (FAQ)

Bootstrap скрывает текст placeholder в полях с плавающими метками, так как он заменяется самой меткой.
Да, можно. Но убедитесь, что стили других библиотек не конфликтуют с классами Bootstrap.
Проверьте стили родительского контейнера. Убедитесь, что не применяются свойства, ограничивающие видимость элемента (например, overflow: hidden).

Теперь вы знаете, как использовать плавающие метки в Bootstrap 5 для создания удобных и красивых форм!