<div class="form-floating mb-3">
<input type="email" class="form-control" id="" placeholder="name@example.com">
<label for="">Email</label>
</div>
Repare que é usado a propriedade placeholder no input, mas com rótulos flutuantes, o rótulo flutua sobre o input, aparecendo no lugar do valor do placeholder, sendo assim, por que fazer uso de placeholder?
Oi
Então, placeholders em formulários são como dicas rápidas sobre o que você deveria digitar ali. No exemplo que você deu, mesmo que o rótulo flutue sobre o campo, o placeholder ainda tem seu valor.
Dica rápida: O placeholder dá aquela sugestãozinha sobre o que você deveria colocar ali. É tipo um guia rápido. Pode ser útil, especialmente em formulários longos, quando o rótulo pode não estar sempre visível.
Para quem usa leitor de tela: Os leitores de tela geralmente leem o conteúdo do placeholder, então é uma mão na roda para quem tem deficiência visual entender o que se espera no campo.
Questão de estilo: Às vezes, o pessoal gosta do visual dos placeholders. Eles podem ser estilizados de formas diferentes para dar destaque ao campo ou combinar com o design da página. Os rótulos flutuantes têm um visual diferente quando estão flutuando ou não.
Mesmo que o rótulo flutuante seja a estrela quando você começa a digitar, o placeholder ainda tem seu papel, dando uma pista antes mesmo de você interagir com o campo. Mas claro, o segredo é equilibrar os dois para uma experiência de usuário maneira e fácil de entender. Às vezes, dá até para deixar o placeholder de lado se o rótulo já tá fazendo o trabalho direitinho.