Um formulário que apanha erros

Vou mostrar-te: um formulário em HTML

Um formulário é um conjunto de campos onde o visitante escreve:

<form id="message-form">
  <label for="name">Your name</label>
  <input id="name" type="text" placeholder="Jake">

  <label for="message">Message</label>
  <textarea id="message" placeholder="Hi! You have an awesome website."></textarea>

  <button type="submit">Send message</button>
</form>

<p id="confirmation"></p>

• <form> envolve o formulário inteiro. <input> é um campo de uma linha, <textarea> é de várias linhas.
• <label> é a legenda de um campo – graças a for e id, pertencem juntos (clicar na legenda salta para o campo).
• placeholder é texto de dica a cinzento.
• Um botão com type="submit" submete o formulário.

E um pouco de CSS para ficar bonito:

form {
  display: flex;
  flex-direction: column;   /* fields stacked vertically */
  gap: 8px;
  max-width: 400px;
}

input, textarea {
  font: inherit;
  padding: 10px;
  border: 1px solid #d6d3d1;
  border-radius: 8px;
}

.error {
  border-color: #dc2626 !important;
  background-color: #fee2e2;
}

flex-direction: column transforma o flexbox de horizontal para vertical: os filhos alinham-se uns abaixo dos outros.

Vou mostrar-te: verificar em JavaScript

const form = document.getElementById("message-form");
const name = document.getElementById("name");
const message = document.getElementById("message");
const confirmation = document.getElementById("confirmation");

form.addEventListener("submit", (event) => {
  event.preventDefault();   // stop the normal submit (the page would reload)

  // Clear old error marks
  name.classList.remove("error");
  message.classList.remove("error");

  // Check that fields are filled in
  if (name.value.trim() === "") {
    name.classList.add("error");
    confirmation.textContent = "You forgot your name. 🙂";
    return;
  }

  if (message.value.trim() === "") {
    message.classList.add("error");
    confirmation.textContent = "So what do you want to tell me? Write something.";
    return;
  }

  // Everything's fine
  confirmation.textContent = "Thanks for the message, " + name.value + "! 💌";
  form.reset();   // empty the fields
});

Coisas novas:

• submit – o evento «o formulário está a ser submetido.» Ouvimo-lo no formulário, não no botão.
• event.preventDefault() – «não faças o que farias normalmente.» Sem isto, a página recarregava e o nosso script não tinha hipótese de correr.
• .value – o que está escrito no campo. .trim() corta espaços (por isso « » conta como vazio!).
• return – sai da função de imediato (não vale a pena correr mais verificações).

Agora és tu 💪

Adiciona um formulário ao teu site que faça sentido para o teu projeto, com verificação de entrada:

• 🏫 Uma mensagem para a escola – nome + mensagem (como o exemplo).
• 🙋 Escreve-me – nome + mensagem, podes adicionar um campo «o teu jogo favorito».
• 🌍 Sugestão de viagem – nome + «para onde devemos ir a seguir e porquê».
• ⚽ Inscrição para treino – nome + idade (<input type="number">) + verifica que a idade está preenchida e é pelo menos 6: if (age.value < 6) { ... }.

O que ficas a saber desta lição

• Um formulário: <form>, <input>, <textarea>, <label>, e o evento submit com preventDefault().
• .value.trim() = o que o utilizador escreveu, sem os espaços à volta.
• A entrada do utilizador deve sempre ser verificada – é a base da programação segura.

© 2026 Ing. Martin Polak / AlgoRhino · Condições de uso do conteúdo