Obtendo e definindo valores de campos: lendo e escrevendo nos formulários

Aprenda a pegar o que o usuário digitou e a preencher campos programaticamente.

Na lição anterior, você aprendeu a acessar os elementos do formulário.
Agora vamos para o próximo passo: ler e alterar os valores desses campos com JavaScript.

Pense no formulário como uma ficha:

  • obter valor = ler o que a pessoa escreveu
  • definir valor = preencher a ficha automaticamente

A propriedade principal: .value

Para a maioria dos campos (input, textarea, select), você usa .value.

Lendo valor

<input id="nome" type="text" value="Maria" />

const nome = document.getElementById("nome");
console.log(nome.value); // Maria

Definindo valor

nome.value = "João";

Agora o campo aparece preenchido com “João”.

Exemplo com textarea

<textarea id="mensagem"></textarea>

const mensagem = document.getElementById("mensagem");
mensagem.value = "Olá! Este texto foi definido via JavaScript.";

Exemplo com select

<select id="estado">
  <option value="">Selecione</option>
  <option value="sp">São Paulo</option>
  <option value="rj">Rio de Janeiro</option>
</select>

const estado = document.getElementById("estado");
estado.value = "rj"; // seleciona Rio de Janeiro

Campos especiais: checkbox e radio

Checkbox (checked)

Para checkbox, além de value, o mais comum é verificar se está marcado com .checked.

<input id="aceito" type="checkbox" />

const aceito = document.getElementById("aceito");

console.log(aceito.checked); // true ou false
aceito.checked = true;       // marca programaticamente

Radio (grupo)

Em radios com mesmo name, você costuma ler o selecionado.

<input type="radio" name="plano" value="basico" />
<input type="radio" name="plano" value="premium" />

const planoSelecionado = document.querySelector("input[name='plano']:checked");
console.log(planoSelecionado ? planoSelecionado.value : "Nenhum plano");

Limpando campos

Você pode limpar valor com string vazia:

nome.value = "";
mensagem.value = "";
estado.value = "";

Ou usar reset no formulário inteiro:

const form = document.getElementById("meuForm");
form.reset();

Preenchendo formulário automaticamente

Muito comum em edição de perfil, recuperação de dados e formulários pré-preenchidos.

nome.value = "Ana Souza";
document.getElementById("email").value = "ana@email.com";
document.getElementById("cidade").value = "sp";

Boas práticas

  • Use nomes claros para variáveis (inputNome, selectEstado).
  • Para texto, aplique trim() antes de validar.
  • Para checkbox/radio, prefira .checked.
  • Se for preencher campos automaticamente, deixe claro para o usuário.
  • Sempre valide dados antes de enviar.

Resumo da lição

  • .value é a forma principal de ler e definir valores em campos de formulário.
  • checkbox e radio geralmente usam .checked para estado de seleção.
  • Você pode preencher, atualizar e limpar campos com JavaScript.
  • Esse controle é essencial para validação, edição e experiência de usuário.