Rótulo Flutuante de Formulário Bootstrap 5

Etiquetas flutuantes/animadas

Por padrão, ao usar etiquetas (label), elas geralmente aparecem no topo do campo de entrada:

Ao usar etiquetas flutuantes, você pode inserir etiquetas dentro dos campos de entrada e torná-las flutuantes/animadas ao clicar no campo de entrada:

Exemplo

<div class="form-floating mb-3 mt-3">
  <input type="text" class="form-control" id="email" placeholder="Por favor, insira o endereço de e-mail" name="email">
  <label for="email">Email</label>
</div>
<div class="form-floating mt-3 mb-3">
  <input type="text" class="form-control" id="pwd" placeholder="Por favor, insira a senha" name="pswd">
  <label for="pwd">Senha</label>
</div>

Experimente pessoalmente

Observações sobre etiquetas flutuantes:

O elemento <label> deve estar após o elemento <input> e cada <input> precisa de placeholder Atributos (mesmo que não sejam exibidos).

Textarea

Também se aplica aos campos de texto:

Exemplo

<div class="form-floating">
  <textarea class="form-control" id="comment" name="text" placeholder="O comentário vai aqui"></textarea>
  <label for="comment">Comentário</label>
</div>

Experimente pessoalmente

Menu de seleção

Você também pode usar 'etiqueta flutuante' no menu de seleção. No entanto, elas não flutuam/animam. A etiqueta sempre aparecerá no canto superior esquerdo do menu de seleção:

Exemplo

<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">Selecione a lista (selecione um item):</label>
</div>

Experimente pessoalmente