Obrazec, ki ujame napake · Kodiraj z Martinom

Pokažem ti: obrazec v HTML

Obrazec je niz polj, v katera obiskovalec vpiše besedilo:

<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> ovije celoten obrazec. <input> je enovrstično polje, <textarea> večvrstično.
<label> je napis polja – zaradi for in id sodita skupaj (klik na napis skoči v polje).
placeholder je siv namig.
Gumb z type="submit" pošlje obrazec.

In malo CSS, da je lep:

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 obrne flexbox iz vodoravnega v navpičnega: otroci stojijo eden pod drugim.

Pokažem ti: preverjanje v 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 – dogodek “obrazec se pošilja.” Poslušamo ga na obrazcu, ne na gumbu.
event.preventDefault() – “ne naredi običajnega.” Brez tega bi se stran osvežila in skripta ne bi imela časa.
.value – kar je vtipkano v polje. .trim() odreže presledke (torej ” ” šteje kot prazno!).
return – takoj zapusti funkcijo (ni smisla nadaljevati preverjanj).

💡

Kam gre sporočilo? Za zdaj nikamor – nimamo strežnika, ki bi ga prejel. Samo preverimo in se zahvalimo. A si zapomni to mesto: v ravni 3 bomo zgradili pravi strežnik s knjigo obiskovalcev in obrazec nanj priklopili. Takrat se bodo sporočila res shranila!

Zdaj si na vrsti 💪

Na spletno stran dodaj obrazec, ki smiselno pripada tvojemu projektu, s preverjanjem vnosa:

🏫 Sporočilo za šolo – ime + sporočilo (kot v primeru).
🙋 Piši meni – ime + sporočilo, lahko dodaš še polje “tvoja najljubša igra”.
🌍 Predlog potovanja – ime + “kam bi šli naslednjič in zakaj”.
⚽ Prijava na trening – ime + starost (<input type="number">) + preveri, da je starost vpisana in vsaj 6: if (age.value < 6) { ... }.

⚠️

Varnostna navada profesionalcev: nikoli ne zaupaj, kar uporabnik vpiše. Vedno preveri – prazno polje, nesmiselna starost, predolgo besedilo. Danes delaš to iz vljudnosti; v pravih aplikacijah je to prva obrambna linija pred napadalci.

✅

Preveri se: Pošiljanje praznega obrazca označi polje rdeče in pokaže sporočilo. Izpolnjen obrazec se zahvali po imenu in se izprazni. Vljudno, prijazno, profesionalno.

Kaj si vzameš iz te lekcije

Obrazec: <form>, <input>, <textarea>, <label> in dogodek submit s preventDefault().
.value.trim() = kar je uporabnik vtipkal, brez robnih presledkov.
Uporabniški vnos je vedno treba preveriti – to je temelj varnega programiranja.