Formularze HTML i obsługa w JavaScript

Formularze HTML (pola tekstowe, pola wyboru, przyciski itp.) służą do zbierania danych od użytkownika. Za pomocą JavaScript możemy te dane odczytać i przetwarzać bez konieczności przeładowania strony czy wysłania ich na serwer (przynajmniej na etapie front-endu).

Właściwość value

Najważniejszą rzeczą jest odczyt wartości wpisanej/wybranej przez użytkownika. W przypadku pól formularza (np. <input>, <textarea>, <select>) służy do tego właściwość value.

Przykład:

<input type="text" id="imieInput" placeholder="Twoje imię">
<button id="pokazBtn">Pokaż imię</button>

let poleImie = document.getElementById("imieInput");
let przycisk = document.getElementById("pokazBtn");
przycisk.addEventListener("click", function() {
    let wpisaneImie = poleImie.value;
    alert("Wpisałeś: " + wpisaneImie);
});

Tutaj po kliknięciu przycisku odczytujemy poleImie.value – czyli tekst, który użytkownik wpisał do pola o id="imieInput" – i wyświetlamy go w alert. Analogicznie można odczytywać wartości z innych typów pól (<input type="number">, email itp.). Dla checkboxów atrybut value jest niezależny od zaznaczenia, a informację o zaznaczeniu daje właściwość checked (true/false).

Zdarzenie submit

Kiedy użytkownik klika przycisk typu submit w formularzu, domyślną akcją przeglądarki jest wysłanie danych i przeładowanie strony. Jednak w aplikacjach SPA lub gdy chcemy przechwycić te dane w JS, możemy zapobiec tej domyślnej akcji. Robimy to, obsługując zdarzenie submit na elemencie <form> i wywołując event.preventDefault() w funkcji.

Przykład — prosta obsługa formularza kontaktowego bez wysyłania:

<form id="kontaktForm">
  Imię: <input type="text" id="name"><br>
  Email: <input type="email" id="email"><br>
  Wiadomość: <textarea id="message"></textarea><br>
  <button type="submit">Wyślij</button>
</form>

<div id="podziekowanie"></div>

let form = document.getElementById("kontaktForm");
form.addEventListener("submit", function(e) {
    e.preventDefault(); // powstrzymaj przeładowanie strony
    // Pobierz wartości z pól
    let imie = document.getElementById("name").value;
    let email = document.getElementById("email").value;
    let wiadomosc = document.getElementById("message").value;
    // "Wysłanie" - np. wyświetlenie podziękowania
    let divPodz = document.getElementById("podziekowanie");
    divPodz.textContent = "Dziękujemy, " + imie + "! Twoja wiadomość została odebrana.";
});

Wyjaśnienie: nasłuchujemy zdarzenia submit na formularzu. Gdy użytkownik naciśnie "Wyślij", nasza funkcja pobiera wartości z poszczególnych pól (używając .value na każdym z nich), następnie zamiast faktycznie wysyłać je na serwer, wyświetlamy potwierdzenie w przygotowanym elemencie <div id="podziekowanie">. Dzięki e.preventDefault() zapobiegamy domyślnemu odświeżeniu strony, więc użytkownik pozostaje na formularzu i może zobaczyć komunikat.

Zdarzenie change

Poza wysłaniem formularza, możemy reagować na zmiany wartości pojedynczych pól. Zdarzenie change wywoływane jest np. gdy:

• użytkownik wpisze tekst w pole i opuści je (straci focus),
• zmieni zaznaczenie checkboxa lub radiobuttona,
• wybierze inną opcję z <select>.

Przykład – nasłuch na polu wyboru kraju:

<select id="kraj">
  <option value="">-- wybierz --</option>
  <option value="pl">Polska</option>
  <option value="us">USA</option>
</select>

let selectKraj = document.getElementById("kraj");
selectKraj.addEventListener("change", function() {
    console.log("Wybrano kraj: " + selectKraj.value);
});

Tutaj każda zmiana wybranej opcji spowoduje wypisanie wartości wybranego kraju w konsoli. Podobnie można nasłuchiwać np. zmian na checkboxie — warto wtedy sprawdzać także checked.

Ćwiczenia

1. Utwórz prosty formularz z jednym polem tekstowym i przyciskiem Submit. Napisz skrypt, który przechwyci zdarzenie submit tego formularza (pamiętaj o event.preventDefault()) i wyświetli (np. w alercie lub w konsoli) to, co użytkownik wpisał w polu.
2. Dodaj więcej pól do formularza (np. pola "imię", "nazwisko", "email"). Przy przechwyceniu submit wypisz wszystkie te informacje naraz w sformatowanej postaci (np. w konsoli: "Imię: Jan, Nazwisko: Kowalski, Email: jan@example.com").
3. Wykorzystaj zdarzenie change na jednym z pól formularza. Na przykład: dodaj pole typu checkbox "Zapisać kopię wiadomości?". Nasłuchuj change na tym checkboxie i w zależności od checked wyświetl (np. w konsoli) komunikat "Kopia wiadomości będzie zachowana" lub "Kopia nie będzie zachowana".
4. (Opcjonalnie) Dodaj do formularza pole typu range (suwak liczbowy) oraz <span id="wynikRange"></span>. Nasłuchuj zdarzenia input na suwaku (podobne do change, ale wywołuje się na bieżąco przy ruszaniu suwakiem) i wyświetlaj aktualną wartość w span obok lub poniżej. Dzięki temu stworzysz dynamiczny podgląd wartości suwaka.