Como pegar os dados do formulário com javascript no submit?

Tenho um formulário simples e gostaria de não fazer o submit direto para uma rota usando method e action. Quero pegar os dados preenchidos para usar dentro do javascript.

Formulário

<form id="criar-usuario">
    <input type="text" id="nome" placeholder="Nome completo">
    <input type="text" id="email" placeholder="Email">
    <input type="text" id="senha" placeholder="Senha">
    <button>Criar conta</button>
</form>

Explicação resumida

HTML

<!-- Adicionar atributo `name` nos inputs -->
<form id="criar-usuario">
    <input type="text" name="nome" placeholder="Nome completo">
    <input type="email" name="email" placeholder="Email">
    <input type="password" name="senha" placeholder="Senha">
    <button>Criar conta</button>
</form>

Javascript

const formUsuario = document.querySelector('#criar-usuario')

// Adiciona evento de 'submit' ao formulário
formUsuario.addEventListener('submit', (event) => {

  // Impede o envio tradicional do formulário
  event.preventDefault()

  // Obtém dados do formulário e converte para objeto Javascript
  const data = Object.fromEntries(new FormData(event.target).entries());
  console.log(data)

});

Resultado (exemplo)

{ 
    "nome": "Badcode", 
    "email": "badcode@teste.com", 
    "senha": "123456"
}

Explicação detalhada

1 - Adicione o atributo name nos seus campos no formulário, eles serão necessários para identificar quando convertermos para um objeto no Javascript.

<input type="text" name="nome" placeholder="Nome completo">
...

2 - Crie um evento do tipo submit com o elemento do formulário.

formUsuario.addEventListener('submit', (event) => {

});

3 - Chame a função .preventDefault() através da variável event, para impedir o envio do formulário da maneira tradicional (recarregando a página, action, method, etc).

formUsuario.addEventListener('submit', (event) => {
    event.preventDefault()
});

4 - Usamos o new FormData(e.target).entries() onde o e.target é uma referencia do elemento do formulário. Essa função retorna um iterador com todos os elementos do formulario no formato [name, value]. O name seria o atributo no elemento e value o valor do campo.

formUsuario.addEventListener('submit', (event) => {
    
    event.preventDefault()
    const entries = new FormData(event.target).entries();

});

5 - Por fim, usamos o Object.fromEntries() que transforma esse iterador em um objeto no Javascript.

formUsuario.addEventListener('submit', (event) => {
    
    event.preventDefault()
    const entries = new FormData(event.target).entries();
    const data = Object.fromEntries(entries);
    console.log(data)

    // { "nome": "Badcode", "email": "badcode@teste.com", "senha": "123456" }

});