Плейсхолдеры

Когда используются стандартные плейсхолдеры, то при заполнении текстового поля плейсхолдер исчезает.

Если текстовое поле используется без <label>, и при открытии страниц данные уже заполнены, может быть сложно сориентироваться, какое текстовое поле за какой параметр отвечает.

В этом случае можно плейсхолдер просто смещать наверх, когда данные заполняются.

<div class="form-floating">
  <input type="email" class="form-control" id="name" placeholder="Имя и фамилия">
  <label for="name">Имя и фамилия</label>
</div>

Результат: