</>Codding
HTML & CSS0/25 lições

Módulo 1 • HTML essencial

Formulários e inputs

Ferramentas e leitura
Leitura100%
Aula guiada50–75 min5 etapas práticas

Nesta aula, você vai compreender Formulários e inputs com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Antes de começar: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar.

Ao terminar, você vai conseguir

  • Explicar Formulários e inputs com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática
1

Estrutura

Defina o conteúdo e sua hierarquia.

2

Apresentação

Aplique regras visuais sem perder significado.

3

Verificação

Confira em tamanhos de tela e formas de navegação diferentes.

0/6 atividades
1

Entenda o problema

O que é Formulários e inputs

Formulário é a porta de entrada dos dados do usuário — e de quase todo problema de segurança e de dados sujos. Validar bem é parte do trabalho, não um extra.

Cheque seu entendimento

Por que validar também no servidor?

1 de 5

O que você aprendeu

  • Formulário é a porta de entrada dos dados do usuário — e de quase todo problema de segurança e de dados sujos. Validar bem é parte do trabalho, não um extra.
  • FormData lê todos os campos pelo atributo name de uma vez — não é preciso capturar input por input.
  • Evite: Esquecer e.preventDefault() e a página recarregar perdendo tudo.
  • Evite: Campo sem name: ele simplesmente não vai no envio.

Videoaulas sobre este tema

Se você aprende melhor assistindo, abrimos uma seleção de aulas em vídeo em português sobre exatamente este assunto.

Aula em vídeo sobre este temaVídeos em português explicando "Formulários e inputs" passo a passo.Vendo alguém programar issoExemplos práticos, com o código sendo escrito na tela.Playlist completa de HTML & CSSCurso em vídeo do começo ao fim, para acompanhar junto com o módulo "HTML essencial".

Quiz rápido

0/2 • 0 certas

1. Por que validar também no servidor?

2. Para que serve o label associado ao input?

Laboratório

1/4

1. Monte a primeira versão

Prática guiada: edite o exemplo abaixo aplicando "Formulários e inputs" e clique em Rodar para ver o resultado ao vivo.

Abrir no playground
  • Checkpoints da prática (0/4)
  • Escreva sua versão a partir do modeloO texto do editor ainda é igual ao modelo inicial. Altere pelo menos uma linha para que a prática conte como sua.
  • Ainda há lacunas para preencherSubstitua os trechos ____ (ou “escreva aqui”) pelo conteúdo pedido — enquanto eles existirem, o resultado não pode ser conferido.
  • Execute seu códigoClique em “Verificar resposta” para rodar seu código e comparar a saída com o esperado.
  • Resultado ainda não confereEsperado: o programa rodar sem erro. Se aparecer uma mensagem de erro, leia a última linha: ela indica a linha e o tipo do problema.

Tire sua dúvida

Cada resposta é conferida contra o material desta lição antes de aparecer. Sem IA por trás e sem inventar nada.

Formulários e inputs

HTML & CSS • Módulo 1: HTML essencial • Codding — material para estudo offline

Aluno: ______________________________ Data: ____ / ____ / ______

Nesta aula, você vai compreender Formulários e inputs com explicação progressiva, exemplo resolvido, checagens e prática. Nada de apenas copiar: cada etapa prepara a próxima.

Objetivos da aula

  • Explicar Formulários e inputs com suas próprias palavras
  • Reconhecer as partes importantes em um exemplo real
  • Identificar e corrigir os erros mais frequentes
  • Aplicar o conteúdo em uma atividade prática

Pré-requisito: Leia a aula anterior do módulo se algum termo parecer novo. Você pode testar o exemplo antes de continuar. • Duração: 50–75 min

Explicação passo a passo

1. O que é Formulários e inputs

Formulário é a porta de entrada dos dados do usuário — e de quase todo problema de segurança e de dados sujos. Validar bem é parte do trabalho, não um extra.

Checkpoint: Por que validar também no servidor? — Resposta: Porque o cliente pode ser burlado e enviar dados direto

2. Como pensar antes de fazer

Use os tipos e atributos nativos primeiro: type="email", required, minlength, pattern. O navegador já valida, avisa e ajuda o teclado do celular a aparecer certo.

Dica: Não decore a forma. Tente explicar com suas palavras qual problema “Formulários e inputs” resolve.

3. Exemplo completo, do início ao resultado

Todo campo precisa de <label> associado (for/id). Sem isso, leitor de tela não anuncia o campo e o toque no rótulo não foca o input — acessibilidade e usabilidade caem juntas.

<form id="cadastro">
  <label for="email">E-mail</label>
  <input id="email" name="email" type="email" required />

  <label for="senha">Senha (mínimo 8)</label>
  <input id="senha" name="senha" type="password" minlength="8" required />

  <button type="submit">Criar conta</button>
</form>

<script>
  document.getElementById('cadastro').addEventListener('submit', (e) => {
    e.preventDefault();               // impede o recarregamento
    const dados = new FormData(e.target);
    console.log(Object.fromEntries(dados));  // { email: ..., senha: ... }
  });
</script>
TrechoO que faz
<form id="cadastro">Define uma parte da estrutura visível ou semântica da página.
<label for="email">E-mail</label>Percorre ou transforma uma sequência de valores.
<input id="email" name="email" type="email" required />Define uma parte da estrutura visível ou semântica da página.
<label for="senha">Senha (mínimo 8)</label>Percorre ou transforma uma sequência de valores.
<input id="senha" name="senha" type="password" minlength="8" required />Define uma parte da estrutura visível ou semântica da página.
<button type="submit">Criar conta</button>Define uma parte da estrutura visível ou semântica da página.
</form>Define uma parte da estrutura visível ou semântica da página.
<script>Define uma parte da estrutura visível ou semântica da página.

Dica: FormData lê todos os campos pelo atributo name de uma vez — não é preciso capturar input por input.

Checkpoint: Para que serve o label associado ao input? — Resposta: Acessibilidade e usabilidade: leitores de tela anunciam e o toque foca o campo

4. Do detalhe para o todo

Validação no navegador é conveniência; validação no servidor é obrigação. Qualquer pessoa pode enviar dados sem passar pela sua tela, então a regra final tem que estar no back-end.

5. Erros comuns e como corrigi-los

1. Esquecer e.preventDefault() e a página recarregar perdendo tudo. 2. Campo sem name: ele simplesmente não vai no envio. 3. Confiar só na validação do navegador e aceitar qualquer coisa no servidor.

Dica: Quando algo der errado, compare uma diferença por vez com o exemplo. Evite mudar várias partes ao mesmo tempo.

Prática guiada

1. 1. Monte a primeira versão

Prática guiada: edite o exemplo abaixo aplicando "Formulários e inputs" e clique em Rodar para ver o resultado ao vivo.

<form id="cadastro">
  <label for="email">E-mail</label>
  <input id="email" name="email" type="email" required />

  <label for="senha">Senha (mínimo 8)</label>
  <input id="senha" name="senha" type="password" minlength="8" required />

  <button type="submit">Criar conta</button>
</form>

<script>
  document.getElementById('cadastro').addEventListener('submit', (e) => {
    e.preventDefault();               // impede o recarregamento
    const dados = new FormData(e.target);
    console.log(Object.fromEntries(dados));  // { email: ..., senha: ... }
  });
</script>

Dica: Volte ao exemplo resolvido e compare a estrutura. Esquecer e.preventDefault() e a página recarregar perdendo tudo.

2. 2. Preveja antes de testar

Sem executar, explique qual resultado o exemplo de Formulários e inputs deve produzir e qual parte é responsável por ele.

Minha previsão:

A parte responsável pelo resultado:

Como vou conferir:

Dica: Use o modelo mental da aula: entrada, transformação e evidência observável.

3. 3. Encontre e corrija o erro

Use o exemplo de Formulários e inputs, identifique um risco citado na aula e registre ou implemente a correção.

<form id="cadastro">
  <label for="email">E-mail</label>
  <input id="email" name="email" type="email" required />

  <label for="senha">Senha (mínimo 8)</label>
  <input id="senha" name="senha" type="password" minlength="8" required />

  <button type="submit">Criar conta</button>
</form>

<script>
  document.getElementById('cadastro').addEventListener('submit', (e) => {
    e.preventDefault();               // impede o recarregamento
    const dados = new FormData(e.target);
    console.log(Object.fromEntries(dados));  // { email: ..., senha: ... }
  });
</script>

Dica: Esquecer e.preventDefault() e a página recarregar perdendo tudo.

4. 4. Aplique em um caso novo

Crie uma variação própria usando Formulários e inputs. Mude os dados ou o cenário e demonstre que o resultado continua correto.

<form id="cadastro">
  <label for="email">E-mail</label>
  <input id="email" name="email" type="email" required />

  <label for="senha">Senha (mínimo 8)</label>
  <input id="senha" name="senha" type="password" minlength="8" required />

  <button type="submit">Criar conta</button>
</form>

<script>
  document.getElementById('cadastro').addEventListener('submit', (e) => {
    e.preventDefault();               // impede o recarregamento
    const dados = new FormData(e.target);
    console.log(Object.fromEntries(dados));  // { email: ..., senha: ... }
  });
</script>

Dica: Mantenha a estrutura que já funcionou e altere uma decisão por vez.

Revisão

  • Formulário é a porta de entrada dos dados do usuário — e de quase todo problema de segurança e de dados sujos. Validar bem é parte do trabalho, não um extra.
  • FormData lê todos os campos pelo atributo name de uma vez — não é preciso capturar input por input.
  • Evite: Esquecer e.preventDefault() e a página recarregar perdendo tudo.
  • Evite: Campo sem name: ele simplesmente não vai no envio.

Exemplo comentado

<form id="cadastro">
  <label for="email">E-mail</label>
  <input id="email" name="email" type="email" required />

  <label for="senha">Senha (mínimo 8)</label>
  <input id="senha" name="senha" type="password" minlength="8" required />

  <button type="submit">Criar conta</button>
</form>

<script>
  document.getElementById('cadastro').addEventListener('submit', (e) => {
    e.preventDefault();               // impede o recarregamento
    const dados = new FormData(e.target);
    console.log(Object.fromEntries(dados));  // { email: ..., senha: ... }
  });
</script>

FormData lê todos os campos pelo atributo name de uma vez — não é preciso capturar input por input.

Erros comuns

  • Esquecer e.preventDefault() e a página recarregar perdendo tudo.
  • Campo sem name: ele simplesmente não vai no envio.
  • Confiar só na validação do navegador e aceitar qualquer coisa no servidor.

Quiz e gabarito completo

  1. 1. Por que validar também no servidor?

    • a) Para ficar mais rápido
    • b) Porque o cliente pode ser burlado e enviar dados direto
    • c) Porque o navegador não valida e-mail
    • d) Para economizar código

    Gabarito: b) Porque o cliente pode ser burlado e enviar dados direto — A validação de tela é conveniência; a regra que protege os dados precisa estar no servidor.

  2. 2. Para que serve o label associado ao input?

    • a) Só estética
    • b) Acessibilidade e usabilidade: leitores de tela anunciam e o toque foca o campo
    • c) Validar o campo
    • d) Enviar o valor

    Gabarito: b) Acessibilidade e usabilidade: leitores de tela anunciam e o toque foca o campo — Sem label associado o campo fica sem nome para tecnologias assistivas.

Codding • HTML & CSS • Formulários e inputs • Prova final e certificado em codding.lovable.app/cursos/html-css/prova