48. Zdarzenia elementów formularza

Wprowadzenie do zdarzeń elementów formularza

Zdarzenia elementów formularza są kluczowe dla tworzenia interaktywnych i responsywnych formularzy na stronach internetowych. Dzięki nim można reagować na działania użytkownika, takie jak wpisywanie tekstu, wybieranie opcji czy wysyłanie formularza. JavaScript umożliwia obsługę tych zdarzeń, co pozwala na dynamiczną walidację, aktualizację interfejsu oraz poprawę doświadczenia użytkownika.

Wskazówka dla PhpStorm: Możesz użyć skrótu Alt + L, aby szybko wstawić polską literę „ł” podczas pisania kodu.
Podstawowe zdarzenia formularza

Oto najczęściej używane zdarzenia związane z elementami formularza:

  • focus – element otrzymuje focus (np. po kliknięciu).
  • blur – element traci focus (np. po kliknięciu poza pole).
  • change – wartość elementu uległa zmianie (np. wybrano inną opcję z listy rozwijanej).
  • input – użytkownik wprowadza dane (np. wpisuje tekst).
  • submit – formularz jest wysyłany.
  • reset – formularz jest resetowany.
Przykład: Obsługa zdarzenia focus i blur
const input = document.querySelector("input");
input.addEventListener("focus", () => {
  console.log("Pole otrzymało focus!");
});

input.addEventListener("blur", () => {
  console.log("Pole straciło focus!");
});
Zdarzenie input

Zdarzenie input jest wywoływane za każdym razem, gdy użytkownik wprowadza lub usuwa znak w polu tekstowym. Jest to przydatne do dynamicznej walidacji lub aktualizacji interfejsu w czasie rzeczywistym.

Przykład: Reagowanie na wprowadzanie tekstu
const input = document.querySelector("input");
input.addEventListener("input", (e) => {
  console.log(`Aktualna wartość: ${e.target.value}`);
});
Zdarzenie change

Zdarzenie change jest wywoływane, gdy wartość elementu ulegnie zmianie i element straci focus. Jest często używane dla pól wyboru, takich jak select, checkbox czy radio.

Przykład: Obsługa zmiany wartości w polu wyboru
const select = document.querySelector("select");
select.addEventListener("change", (e) => {
  console.log(`Wybrana opcja: ${e.target.value}`);
});
Zdarzenie submit

Zdarzenie submit jest wywoływane, gdy użytkownik próbuje wysłać formularz. Można je wykorzystać do walidacji danych przed ich wysłaniem na serwer.

Przykład: Walidacja formularza przed wysłaniem
const form = document.querySelector("form");
form.addEventListener("submit", (e) => {
  const input = document.querySelector("input[type='text']");
  if (input.value === "") {
    e.preventDefault(); // Zatrzymaj wysyłanie formularza
    alert("Pole tekstowe nie może być puste!");
  }
});
Praktyczne zastosowania

Zdarzenia elementów formularza mają wiele praktycznych zastosowań, takich jak:

  • Dynamiczna walidacja pól formularza.
  • Automatyczne uzupełnianie pól na podstawie wprowadzonych danych.
  • Wyświetlanie podpowiedzi lub komunikatów błędów.
  • Blokowanie wysyłania formularza, jeśli dane są niepoprawne.
Przykład: Dynamiczna walidacja pola e-mail
const emailInput = document.querySelector("input[type='email']");
emailInput.addEventListener("input", (e) => {
  const emailRegex = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;
  if (!emailRegex.test(e.target.value)) {
    e.target.style.borderColor = "red";
  } else {
    e.target.style.borderColor = "green";
  }
});
Delegowanie zdarzeń w formularzach

Delegowanie zdarzeń (ang. *event delegation*) jest przydatne, gdy formularz zawiera wiele pól, a chcemy unikać dodawania funkcji obsługi do każdego z nich osobno. Możemy zarejestrować jedną funkcję obsługi na całym formularzu i sprawdzać, które pole wywołało zdarzenie.

Przykład: Delegowanie zdarzeń dla pól formularza
const form = document.querySelector("form");
form.addEventListener("input", (e) => {
  if (e.target.tagName === "INPUT") {
    console.log(`Zmiana w polu: ${e.target.name}`);
  }
});
Podsumowanie

Zdarzenia elementów formularza są niezbędne do tworzenia interaktywnych i przyjaznych dla użytkownika formularzy. Dzięki JavaScript możemy reagować na różne interakcje użytkownika, co pozwala na dynamiczną walidację, aktualizację interfejsu oraz poprawę doświadczenia użytkownika.

Wskazówka dla PhpStorm: Podczas debugowania kodu JavaScript w PhpStorm, możesz użyć Ctrl + D, aby szybko uruchomić debugowanie i śledzić zdarzenia krok po kroku.