Мобильные этикетки форм Bootstrap 5

Плавающие ярлыки/анимированные ярлыки

По умолчанию, при использовании ярлыков (label), они обычно появляются в верхней части поля ввода:

Используя плавающие ярлыки, вы можете вставить ярлыки в поле ввода и анимировать их при нажатии на поле ввода:

Пример

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="введите адрес электронной почты" name="email">
  <label for="email">Электронная почта</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="Введите пароль" name="pswd">
  <label for="pwd">Пароль</label>
</div>

Попробуйте сами

Внимание к плавающим этикеткам:

Элемент <label> должен следовать за элементом <input>, и каждый элемент <input> должен placeholder Свойства (даже если они не видны).

Textarea

Также применяется к текстовым полям:

Пример

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="Комментарий здесь"></textarea>
  <label for="comment">Комментарий</label>
</div>

Попробуйте сами

Меню выбора

Вы также можете использовать "плавающую этикетку" в меню выбора. Но они не будут плавать/анимироваться. Этикетка всегда будет出现在 верхнем левом углу меню выбора:

Пример

<div class="form-floating">
  <select class="form-select" id="sel1" name="sellist">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <label for="sel1" class="form-label">Выберите список (выберите один элемент):</label>
</div>

Попробуйте сами