Formularz, który wyłapuje błędy

Pokażę ci: formularz w HTML

Formularz to zestaw pól, w które odwiedzający coś wpisuje:

<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> owija cały formularz. <input> to pole jednoliniowe, <textarea> wieloliniowe.
• <label> to podpis pola – dzięki for i id należą do siebie (kliknięcie w podpis skacze do pola).
• placeholder to szary tekst podpowiedzi.
• Przycisk z type="submit" wysyła formularz.

I trochę CSS, żeby wyglądało ładnie:

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 obraca flexbox z boku na pion: dzieci ustawiają się jedno pod drugim.

Pokażę ci: sprawdzanie w 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
});

Nowości:

• submit – zdarzenie „formularz jest wysyłany”. Nasłuchujemy go na formularzu, nie na przycisku.
• event.preventDefault() – „nie rób tego, co zwykle.” Bez tego strona by się odświeżyła i nasz skrypt nie dostałby szansy.
• .value – to, co jest wpisane w polu. .trim() obcina spacje (więc „ ” liczy się jako puste!).
• return – natychmiast wyjdź z funkcji (nie ma sensu robić dalszych sprawdzeń).

Teraz ty 💪

Dodaj na swoją stronę formularz, który ma sens w twoim projekcie, ze sprawdzaniem wpisów:

• 🏫 Wiadomość do szkoły – imię + wiadomość (dokładnie jak w przykładzie).
• 🙋 Napisz do mnie – imię + wiadomość, możesz też dodać pole „twoja ulubiona gra”.
• 🌍 Propozycja wyjazdu – imię + „dokąd powinniśmy pojechać następnym razem i dlaczego”.
• ⚽ Zapis na trening – imię + wiek (<input type="number">) + sprawdź, że wiek jest wypełniony i wynosi co najmniej 6: if (age.value < 6) { ... }.

Co wyniesiesz z tej lekcji

• Formularz: <form>, <input>, <textarea>, <label> oraz zdarzenie submit z preventDefault().
• .value.trim() = to, co użytkownik wpisał, bez spacji wokół.
• Wpisy użytkownika trzeba zawsze sprawdzać – to podstawa bezpiecznego programowania.

© 2026 Ing. Martin Polak / AlgoRhino · Warunki korzystania z treści