Acessando elementos de formulário: pegando os dados que o usuário digitou

Descubra como selecionar campos de input, textareas e selects.

Formulário é como uma “ficha” que a pessoa preenche: nome, e-mail, senha, mensagem, opção de cidade, etc.
No JavaScript, o primeiro passo para trabalhar com essa ficha é acessar os campos.

Ideia principal

Antes de ler os dados digitados, você precisa “encontrar” os elementos do formulário no DOM.

Pense assim:

  • o HTML cria os campos
  • o JavaScript pega uma “referência” desses campos
  • com essa referência, você consegue ler e usar os dados

Campos mais comuns em formulários

  • input (texto, e-mail, senha, número…)
  • textarea (texto maior)
  • select (lista de opções)

Exemplo de estrutura:

<form id="cadastro">
  <input id="nome" type="text" placeholder="Seu nome" />
  <input id="email" type="email" placeholder="Seu e-mail" />
  <textarea id="mensagem" placeholder="Sua mensagem"></textarea>
  <select id="cidade">
    <option value="">Selecione</option>
    <option value="sp">São Paulo</option>
    <option value="rj">Rio de Janeiro</option>
  </select>
  <button type="submit">Enviar</button>
</form>

Selecionando os campos no JavaScript

Você pode usar getElementById ou querySelector.

const form = document.getElementById("cadastro");
const nome = document.getElementById("nome");
const email = document.getElementById("email");
const mensagem = document.getElementById("mensagem");
const cidade = document.getElementById("cidade");

Também funciona:

const nome = document.querySelector("#nome");

Lendo o que foi digitado: .value

Depois de acessar o elemento, usamos .value para pegar o valor atual.

console.log(nome.value);
console.log(email.value);
console.log(mensagem.value);
console.log(cidade.value);

.value é como abrir a ficha e ler o campo preenchido.

Momento certo de ler os dados

Geralmente, você lê os valores em eventos como:

  • input (enquanto digita)
  • change (quando confirma mudança)
  • submit (quando envia formulário)

Exemplo com submit:

form.addEventListener("submit", function (e) {
  e.preventDefault();

  console.log("Nome:", nome.value);
  console.log("Email:", email.value);
  console.log("Mensagem:", mensagem.value);
  console.log("Cidade:", cidade.value);
});

Observação importante sobre name

Além do id, muitos formulários usam atributo name, especialmente quando os dados são enviados para servidor.

Exemplo:

<input id="nome" name="nome" type="text" />

Para manipulação no front-end, id facilita bastante.
Para envio e integração com back-end, name também é essencial.

Boas práticas iniciais

  • Dê id claros aos campos (nome, email, telefone).
  • Guarde os elementos em variáveis com nomes claros.
  • Leia dados em eventos apropriados (principalmente submit).
  • Use trim() quando quiser remover espaços extras nas pontas do texto.

Exemplo rápido:

const nomeLimpo = nome.value.trim();

Resumo da lição

  • Para pegar dados do formulário, primeiro você acessa os elementos no DOM.
  • Métodos comuns: getElementById e querySelector.
  • A propriedade principal para ler o conteúdo é .value.
  • O evento submit é um dos momentos mais comuns para coletar os dados.
  • Essa etapa é a base para validação, feedback e envio de informações.