Segue uma documentação detalhada explicando o funcionamento do efeito da label flutuante no formulário:

---

Documentação do Formulário com Label Flutuante

Este formulário implementa um efeito de label flutuante, onde a label sobre o campo de entrada se move para uma posição superior quando o input é focado ou preenchido. Esta funcionalidade segue princípios de UX/UI modernos e é construída com HTML e CSS, sem dependências externas.

---

Estrutura Geral do Código

HTML

<div class="input-container">
  <input type="text" id="nome" placeholder=" " required>
  <label for="nome">Nome Completo</label>
</div>

• <input>: Representa o campo de entrada onde o usuário pode digitar.

  • placeholder=" ": Usado para garantir que o campo pareça vazio visualmente, mas permita aplicar estilos para o estado de preenchimento.
  • id e for: Ligam semanticamente o input à sua respectiva label para melhorar acessibilidade.

• <label>: Exibe o texto do campo. Inicialmente, está sobre o campo de entrada.

---

CSS

.input-container {
  position: relative;
  margin-bottom: 20px;
}

.input-container label {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  background-color: #ffffff;
  padding: 0 5px;
  transition: all 0.3s ease;
  color: #aaa;
  font-size: 16px;
}

.input-container input {
  width: 100%;
  padding: 12px 15px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
  transition: all 0.3s ease;
}

• position: relative (no contêiner):

  • Garante que a label esteja posicionada em relação ao contêiner do input.

• position: absolute (na label):

  • Permite que a label seja colocada exatamente sobre o input.

• transition: all 0.3s ease:

  • Adiciona animação suave para as mudanças de posição, cor e tamanho da label.

---

O "Segredo" do Efeito

O verdadeiro segredo para o efeito está nas pseudo-classes CSS e no uso do placeholder=" " no input. Estas características garantem que a label reaja ao estado do campo, com base no foco ou no preenchimento. Vamos detalhar:

Pseudo-classes CSS:

1. :focus:

   • É ativada quando o usuário clica ou navega até o campo.
   • A propriedade input:focus + label altera a posição e o estilo da label.

   .input-container input:focus + label {
     top: -10px;
     font-size: 14px;
     color: #007bff;
   }

2. :not(:placeholder-shown):

   • Detecta quando o campo tem texto digitado.
   • Assim, mesmo após perder o foco, a label permanece na posição superior.

   .input-container input:not(:placeholder-shown) + label {
     top: -10px;
     font-size: 14px;
     color: #007bff;
   }

---

Fluxo do Efeito

1. Estado Inicial:

   • A label está centralizada verticalmente sobre o input (via top: 50% e transform: translateY(-50%)).
   • A cor é cinza-clara (color: #aaa), indicando que o campo está vazio.

2. Foco no Campo (:focus):

   • Quando o usuário clica no input, o estilo do label é alterado:
     • top: Move-se para a posição superior (-10px).
     • font-size: Reduz para 14px, destacando a label de forma discreta.
     • color: Torna-se azul, indicando o estado ativo.

3. Campo Preenchido (:not(:placeholder-shown)):

   • Quando o usuário digita algo, a pseudo-classe :not(:placeholder-shown) entra em ação.
   • A label permanece na posição superior, garantindo clareza do conteúdo preenchido.

4. Perda de Foco:

   • Se o campo está vazio, o estilo da label retorna ao estado inicial.
   • Caso contrário, a label permanece na posição superior.

---

Vantagens do Design

1. Acessibilidade (UX):

   • Evita confusão: a label é sempre visível, mesmo quando o campo é preenchido.
   • Navegação com teclado ou leitor de tela é facilitada graças aos atributos for e id.

2. Elegância (UI):

   • O efeito suave cria um visual moderno e profissional.
   • Combinação de cores e animações melhora a experiência geral.

3. Sem JavaScript:

   • Todo o comportamento é implementado com HTML e CSS, reduzindo a complexidade e melhorando o desempenho.

---

Pontos-Chave para Adaptação

Se desejar personalizar o efeito:

• Alterar Cores: Modifique o valor de color nas pseudo-classes para personalizar as cores da label no estado ativo.
• Posição e Tamanho da Label: Ajuste os valores de top e font-size para alterar o comportamento do movimento.
• Transições: Experimente mudar o tempo ou o tipo de transição para diferentes animações.

---

Este design combina funcionalidade e estética de forma eficiente, entregando uma solução elegante e fácil de manter.