Een formulier dat fouten vangt

Ik laat je zien: een formulier in HTML

Een formulier is een set velden waar de bezoeker in typt:

<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> wikkelt het hele formulier in. <input> is een veld op één regel, <textarea> is een veld op meerdere regels.
• <label> is het bijschrift van een veld – dankzij for en id horen ze bij elkaar (klikken op het label springt naar het veld).
• placeholder is grijze hinttekst.
• Een knop met type="submit" verstuurt het formulier.

En wat CSS om het mooi te maken:

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 draait flexbox van horizontaal naar verticaal: kinderen staan onder elkaar.

Ik laat je zien: controleren in 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
});

Nieuw:

• submit – de gebeurtenis “het formulier wordt verstuurd.” We luisteren ernaar op het formulier, niet op de knop.
• event.preventDefault() – “doe niet wat je normaal zou doen.” Zonder dit zou de pagina verversen en krijgt ons script geen kans te draaien.
• .value – wat er in het veld getypt is. .trim() knipt spaties weg (dus ” ” telt als leeg!).
• return – verlaat de functie meteen (verder controleren heeft geen zin).

Nu jij 💪

Voeg een formulier toe aan je website dat bij je project past, met invoercontrole:

• 🏫 Een bericht voor de school – naam + bericht (net als het voorbeeld).
• 🙋 Schrijf naar mij – naam + bericht, voeg gerust een veld “je favoriete game” toe.
• 🌍 Reissuggestie – naam + “waar moeten we naartoe en waarom.”
• ⚽ Training aanmelden – naam + leeftijd (<input type="number">) + controleer dat de leeftijd is ingevuld en minstens 6 is: if (age.value < 6) { ... }.

Wat neem je mee uit deze les

• Een formulier: <form>, <input>, <textarea>, <label>, en de submit-gebeurtenis met preventDefault().
• .value.trim() = wat de gebruiker typte, zonder de spaties eromheen.
• Gebruikersinvoer moet je altijd controleren – dat is de basis van veilig programmeren.

© 2026 Ing. Martin Polak / AlgoRhino · Contentgebruiksvoorwaarden