Formulár, ktorý chytá chyby

Ukážem ti: formulár v HTML

Formulár je súbor polí, do ktorých návštevník píše:

<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> obalí celý formulár. <input> je jednoriadkové pole, <textarea> viacriadkové.
• <label> je popisok poľa – vďaka for a id k sebe patria (kliknutie na popisok skočí do poľa).
• placeholder je sivý nápovedný text.
• Tlačidlo s type="submit" odošle formulár.

A trochu CSS, aby to pekne vyzeralo:

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 otočí flexbox zo strany na výšku: deti sa zoradia jedno pod druhým.

Ukážem ti: kontrola v JavaScripte

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
});

Nové veci:

• submit – udalosť „formulár sa odosiela.” Počúvame ju na formulári, nie na tlačidle.
• event.preventDefault() – „nerob, čo by si normálne robil.” Bez toho by sa stránka obnovila a náš skript by sa nestihol spustiť.
• .value – čo je napísané v poli. .trim() oreže medzery (takže „ ” sa počíta ako prázdne!).
• return – okamžite ukončí funkciu (nemá zmysel pokračovať v ďalších kontrolách).

Teraz ty 💪

Pridaj na svoju webovú stránku formulár, ktorý dáva zmysel pre tvoj projekt, s kontrolou vstupov:

• 🏫 Správa pre školu – meno + správa (ako v príklade).
• 🙋 Napíš mi – meno + správa, pokojne pridaj aj pole „tvoja obľúbená hra”.
• 🌍 Návrh výletu – meno + „kam by sme mali ísť ďalej a prečo”.
• ⚽ Prihlásenie na tréning – meno + vek (<input type="number">) + skontroluj, že vek je vyplnený a aspoň 6: if (age.value < 6) { ... }.

Čo si z tejto lekcie odnášaš

• Formulár: <form>, <input>, <textarea>, <label> a udalosť submit s preventDefault().
• .value.trim() = čo používateľ napísal, bez okolitých medzier.
• Vstup používateľa treba vždy kontrolovať – to je základ bezpečného programovania.

© 2026 Ing. Martin Polak / AlgoRhino · Podmienky používania obsahu