Carregando...

Formulários em JavaScript

O balcão do chá tem uma ficha. O formulário é #slip. Há um campo de texto #guest cujo name também é guest, um campo numérico #cups cujo name também é cups, e um botão #send com type="submit". Abaixo, #note ainda diz blank.
Um formulário junta campos com nome. O que foi digitado está em value, e isso é sempre texto, mesmo com type number. Enviar é o evento submit no formulário. Sem preventDefault, o navegador abre o endereço do formulário e esta página vai embora. Esta ficha chama preventDefault, então a nota continua legível. A página grava lida, grava 2, clica uma vez em send, e a linha fica lida / 2 / stayed.

Não é a faixa de bilhetes

A faixa punha um listener de clique no pai e lia event.target. A linha era red / blue / gold / 1, sem preventDefault. A página da placa chamava isso num link. A linha era click / seal / plaque / true / quiet. Esta ficha não é nenhuma das duas. Não há botão gold nem currentTarget. O evento se chama submit. O que importa é lida e o texto 2.
getElementById("guest") acha o campo pelo id. slip.elements.guest acha pelo name, através do formulário. Aqui id e name são a mesma palavra. Outra lição vai checar campo vazio. Esta não. Um convidado vazio também é enviado.

O que a ficha anota

A nota começa em blank. Convidado e xícaras começam vazios. O botão continua dizendo send. Leia as linhas em ordem. Cada trecho parte da ficha vazia, salvo a linha da página, que é a demo de baixo. Essa demo clica uma vez em send.

📊 O que a ficha anota

Momento O que você lê Nota Fácil de confundir
convidado em lida guest.value lida ler o id guest
xícaras em 2 cups.value 2, e é texto esperar o número 2
clique em send, a função escreve stayed a nota stayed chamar slip.submit(), que pula o listener
os dois nomes, pelo formulário elements.guest e elements.cups lida 2 ler elements.slip
script da página a linha lida / 2 / stayed red / blue / gold / 1

value não transforma um campo numérico em número. Depois de guardar 2, cups.value são os caracteres 2. typeof cups.value é "string". Se precisar de número depois, você converte. Esta linha não faz isso.
send.click() dispara submit porque o type do botão é submit. slip.submit() é outra chamada: envia o formulário e não roda o seu listener. preventDefault nem chega a executar. Esta página usa o clique.

Dois caminhos para o mesmo campo

getElementById("cups") usa o id. slip.elements.cups usa o name, e só quando você já tem o formulário. Aqui os dois atributos são a mesma palavra. Se o name fosse count e o id continuasse cups, elements.cups não existiria e o campo seria elements.count.

O nome do convidado

O campo começa vazio. O script guarda lida em value e lê de novo essa propriedade na nota. Ainda não se envia nada.

Read the guest

javascript 
let guest = document.getElementById("guest");
let note = document.getElementById("note");
guest.value = "lida";
note.textContent = guest.value;
console.log(note.textContent);

O registro é lida. O id é guest. A nota não é a palavra guest. É o texto que está em value.

Quantas xícaras

Ficha nova. O campo das xícaras é type="number". Guarde 2, leia value e pergunte typeof.

Read the cups as text

javascript 
let cups = document.getElementById("cups");
let note = document.getElementById("note");
cups.value = "2";
note.textContent = cups.value + " " + typeof cups.value;
console.log(note.textContent);

O registro é 2 string. A caixa parece numérica e o script recebe texto. Guarde o número 2 sem aspas e a propriedade volta como o texto "2".

O botão de enviar

Ficha nova. O listener está no formulário, para submit. Ele chama preventDefault e escreve stayed. Depois a página clica em send. Não chama slip.submit().

Stay on the page

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
function pour(event) {
event.preventDefault();
note.textContent = "stayed";
}
slip.addEventListener("submit", pour);
document.getElementById("send").click();
console.log(note.textContent);

O registro é stayed. O listener rodou, então o navegador não saiu. Chame slip.submit() no lugar do clique e pour não roda. A nota continua blank.

Os nomes na ficha

Ficha nova, sem listener. O script escreve os dois campos por slip.elements, usando o name, e junta os dois na nota.

Read both names

javascript 
let slip = document.getElementById("slip");
let note = document.getElementById("note");
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
note.textContent = slip.elements.guest.value + " " + slip.elements.cups.value;
console.log(note.textContent);

O registro é lida 2. elements.guest é o campo cujo name é guest, não um elemento com id slip. O espaço só separa a nota. A linha da página usa depois /.

A linha sob a ficha

O script fica no fim do body, depois do formulário e dos parágrafos. mark começa como left. O listener impede o envio padrão, copia os dois valores na nota e põe mark em stayed. Depois preenche lida e 2 e clica uma vez em send. A linha é escrita depois desse clique.

Page demo — tea slip

html 
<!DOCTYPE html>
<html>
<head>
<title>forms — page</title>
</head>
<body>
<form id="slip">
<input id="guest" name="guest" type="text">
<input id="cups" name="cups" type="number">
<button id="send" type="submit">send</button>
</form>
<p id="note">blank</p>
<p id="line">…</p>
<script>
let slip = document.getElementById("slip");
let note = document.getElementById("note");
let mark = "left";
function pour(event) {
event.preventDefault();
note.textContent =
slip.elements.guest.value + " / " + slip.elements.cups.value;
mark = "stayed";
}
slip.addEventListener("submit", pour);
slip.elements.guest.value = "lida";
slip.elements.cups.value = "2";
document.getElementById("send").click();
document.getElementById("line").textContent =
note.textContent + " / " + mark;
</script>
</body>
</html>

A linha é lida / 2 / stayed. A primeira palavra é o convidado, a segunda as xícaras como texto, a última mark. O listener rodou, então é stayed e não left. A nota termina em lida / 2. blank sumiu. A linha dos bilhetes é outra página. Esta ficha não confere se os campos estão preenchidos.

No balcão

  1. Guarde lida no convidado e leia value. A nota é lida.
  2. Guarde 2 nas xícaras e leia value com typeof. A nota é 2 string.
  3. Ouça submit, chame preventDefault e clique em send. A nota é stayed.
  4. Leia os dois campos com slip.elements. Depois a linha: lida / 2 / stayed.

Tropeços no balcão

Os rótulos continuam guest, cups e send. A nota não é a palavra slip.

  • Tratar cups.value como o número 2
  • Chamar slip.submit() e esperar pour
  • Esquecer preventDefault, e o navegador abre o endereço
  • Ler o id guest quando você queria value
  • Procurar slip.elements.slip
  • Conferir campos vazios ou padrões nesta página
  • Ler a linha como red / blue / gold / 1

Fique com isto

  • Depois de guardar lida, guest.value é lida
  • cups.value é o texto 2, e typeof é "string"
  • send.click() roda o listener de submit; slip.submit() não
  • preventDefault é o motivo de a página continuar aqui e a nota poder dizer stayed
  • slip.elements.guest e slip.elements.cups leem os campos nomeados
  • A linha da página é lida / 2 / stayed

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
7
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 53 de 55
Javascript Tutorial