Fala aí Renan!!
Não sei se fiz 100% o que você queria, mas gerei uma estrutura simples que mostra e desaparece o título do formulário ao clicar no seu input.
<!DOCTYPE html>
<html>
<body>
<form>
<label for="input"></label> <br>
<input id="input" type="text" name="fname" placeholder="Primeiro Nome"><br>
<br>
</form>
<script>
let input = document.querySelector("#input");
input.addEventListener('focusin', function(){
let label = document.querySelector('label[for="input"]');
label.textContent = input.placeholder;
input.placeholder = '';
});
input.addEventListener('focusout', function(){
let label = document.querySelector('label[for="input"]');
input.placeholder = label.textContent;
label.textContent = '';
});
</script>
</body>
</html>
O truque é observar os eventListeners utilizados ao clicarmos no input: focusin é o evento utilizado para ações onde um elemento possui o atributo de foco (ex: ao clicarmos numa caixa de texto para digitarmos o texto na mesma), enquanto focusout representa a perda do mesmo ao interagir com outros objetos na tela ( ex: Clicar fora da caixa de texto selecionada).
Outra dica legal é colocar o atributo placeholder no seu input: quando o mesmo está setado com algum texto, o mesmo aparecerá "transparente" no input, e irá sumir quando algum texto estiver escrito dentro do input.
Desta forma, conseguimos alterar o texto e a visibilidade dos elementos de acordo com o foco nos mesmos selecionados na tela!
Espero ter conseguido ajudar, e se tiver alguma dúvida quanto ao código, só perguntar!!
