JavaScript Academy · Aula

Lendo valores de entrada

Acesse valores de campos de texto, caixas de seleção e listas suspensas.

Lendo valores de entrada é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Trabalhando com dados de formulários

Os formulários coletam dados inseridos pelo usuário por meio de campos como caixas de texto, caixas de seleção, botões de opção e listas suspensas. Cada tipo expõe seus dados de uma maneira um pouco diferente.

input.value

Os campos de entrada semelhantes a texto expõem seu conteúdo atual por meio da propriedade value, sempre como uma cadeia de caracteres.

const name = document.querySelector("#name");
console.log(name.value);

O valor é sempre uma cadeia de caracteres

Até mesmo os campos numéricos retornam uma cadeia de caracteres. Faça a conversão explicitamente quando precisar de um número.

const age = document.querySelector("#age");
const n = Number(age.value);

Valor como número

Os campos numéricos e de data oferecem valueAsNumber, que retorna diretamente um número (ou um valor que não é um número quando está vazio ou é inválido).

const qty = document.querySelector("#qty");
console.log(qty.valueAsNumber);

checkbox.checked

As caixas de seleção informam seu estado por meio da propriedade booleana checked, não de value.

const agree = document.querySelector("#agree");
console.log(agree.checked); // true or false

Botões de opção

Em um grupo de botões de opção, encontre aquele que está marcado. A propriedade checked identifica a opção selecionada.

const selected = document.querySelector("input[name=plan]:checked");
console.log(selected ? selected.value : "none");

Valor da lista de seleção

Uma lista suspensa de seleção única expõe a opção escolhida por meio de value.

const country = document.querySelector("#country");
console.log(country.value);

Seleção múltipla

Em uma seleção múltipla, leia selectedOptions e transforme as opções em valores.

const langs = document.querySelector("#langs");
const values = [...langs.selectedOptions].map((o) => o.value);

O evento de entrada

Escute o evento input para reagir a cada tecla pressionada ou alteração em tempo real.

name.addEventListener("input", (e) => {
  console.log(e.target.value);
});

O evento de alteração

O evento change é acionado quando um campo perde o foco depois que seu valor foi alterado, ou imediatamente no caso de caixas de seleção e listas de seleção.

country.addEventListener("change", (e) => {
  console.log("chose " + e.target.value);
});

FormData

FormData coleta de uma só vez todos os campos nomeados de um formulário, sendo ideal para enviá-los a um servidor.

const form = document.querySelector("form");
const data = new FormData(form);
console.log(data.get("name"));

Verificação rápida

Leia a caixa de seleção corretamente.

Resumo

Leia os campos de texto por meio de value (sempre uma cadeia de caracteres; use valueAsNumber para números), e as caixas de seleção e os botões de opção por meio de checked. Leia as listas suspensas por meio de value ou selectedOptions. Reaja com o evento input (a cada alteração) ou com o evento change (ao confirmar), e reúna tudo de uma só vez com FormData.

Perguntas Frequentes

A aula “Lendo valores de entrada” é grátis?

Sim — o texto completo de “Lendo valores de entrada” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Lendo valores de entrada”?

Acesse valores de campos de texto, caixas de seleção e listas suspensas. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Lendo valores de entrada”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy