Obrazac koji hvata greške

Pokazat ću ti: obrazac u HTML-u

Obrazac je skup polja u koja posjetitelj upisuje:

<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> umotava cijeli obrazac. <input> je jednoredno polje, <textarea> je višeredno.
• <label> je natpis polja – zahvaljujući for i id pripadaju zajedno (klik na natpis skače na polje).
• placeholder je sivi tekst-podsjetnik.
• Gumb s type="submit" šalje obrazac.

I malo CSS-a da lijepo izgleda:

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 okreće flexbox sa strane na uspravno: djeca se slažu jedno ispod drugog.

Pokazat ću ti: provjera u JavaScriptu

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

Novo:

• submit – događaj “obrazac se šalje.” Slušamo ga na obrascu, ne na gumbu.
• event.preventDefault() – “ne radi ono što bi inače radio.” Bez ovoga stranica bi se osvježila i naš skript ne bi stigao raditi.
• .value – što je upisano u polje. .trim() skida razmake (pa ” ” računa kao prazno!).
• return – odmah izađi iz funkcije (nema smisla nastaviti provjere).

Sad si ti na redu 💪

Dodaj obrazac na svoju web stranicu koji ima smisla za tvoj projekt, s provjerom unosa:

• 🏫 Poruka za školu – ime + poruka (kao u primjeru).
• 🙋 Piši mi – ime + poruka, slobodno dodaj i polje “tvoja omiljena igra”.
• 🌍 Prijedlog putovanja – ime + “kamo bismo sljedeće trebali i zašto”.
• ⚽ Prijava na trening – ime + dob (<input type="number">) + provjeri da je dob upisana i barem 6: if (age.value < 6) { ... }.

Što ćeš ponijeti iz ove lekcije

• Obrazac: <form>, <input>, <textarea>, <label> i događaj submit s preventDefault().
• .value.trim() = što je korisnik upisao, bez razmaka oko toga.
• Korisnički unos uvijek treba provjeriti – to je temelj sigurnog programiranja.

© 2026 Ing. Martin Polak / AlgoRhino · Uvjeti korištenja sadržaja