Wprowadzenie do walidacji formularzy w HTML5

Wprowadzenie do walidacji formularzy w HTML5

Walidacja formularzy to proces sprawdzania poprawności danych wpisywanych przez użytkownika. HTML5 wprowadza szereg wbudowanych mechanizmów walidacyjnych, które działają automatycznie – bez potrzeby stosowania JavaScriptu.

Dzięki nim możesz ograniczyć liczbę błędów, poprawić jakość danych i ułatwić użytkownikowi poprawne wypełnienie formularza.

Dlaczego walidacja jest ważna?

• Chroni formularz przed wysłaniem błędnych danych.
• Poprawia jakość informacji przesyłanych do serwera.
• Zwiększa komfort użytkownika, informując go od razu o błędach.

Wbudowane typy pól z walidacją

Niektóre typy <input> mają wbudowane reguły walidacji, np.:

• type="email" – akceptuje tylko poprawny adres e-mail.
• type="url" – wymaga poprawnego adresu URL (np. https://strona.pl).
• type="number" – pozwala wpisać tylko liczby.
• type="date" – umożliwia wybór daty z kalendarza.

<form>
  <label for="email">Adres e-mail:</label>
  <input type="email" id="email" required>

  <br><br>

  <label for="wiek">Wiek:</label>
  <input type="number" id="wiek" min="18" max="99">

  <br><br>

  <button type="submit">Wyślij</button>
</form>

Działanie: Formularz nie zostanie wysłany, jeśli użytkownik nie wpisze poprawnego e-maila lub poda wiek poza zakresem 18–99.

Użycie atrybutów wspierających walidację

HTML5 oferuje dodatkowe atrybuty, które wzmacniają walidację formularzy:

• required – pole musi zostać wypełnione.
• min i max – określają zakres wartości (dla number, date itp.).
• maxlength – maksymalna liczba znaków.
• pattern – wymaga dopasowania do wzorca (wyrażenia regularnego).

<input type="text" name="kod" pattern="[A-Z]{3}[0-9]{3}" required placeholder="ABC123">

To pole wymaga wpisania 3 wielkich liter i 3 cyfr, np. ABC123.

Wyświetlanie komunikatów błędów

Każda przeglądarka automatycznie wyświetla prosty komunikat, gdy użytkownik wpisze błędne dane. Możesz jednak spersonalizować tę wiadomość za pomocą atrybutu title.

<input type="text" pattern="[0-9]{6}" title="Wpisz 6 cyfr" required>

✅ Praktyczne ćwiczenie

Wejdź na JSFiddle i przetestuj poniższy formularz:

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" placeholder="np. jan@domena.pl" required>

  <br><br>

  <label for="wiek">Wiek (18-99):</label>
  <input type="number" id="wiek" min="18" max="99" required>

  <br><br>

  <label for="kod">Kod (ABC123):</label>
  <input type="text" id="kod" pattern="[A-Z]{3}[0-9]{3}" title="Wpisz 3 wielkie litery i 3 cyfry" required>

  <br><br>

  <button type="submit">Wyślij formularz</button>
</form>

📌 Podsumowanie

• HTML5 oferuje automatyczną walidację formularzy bez JavaScriptu.
• Dzięki typom pól, wzorcom i zakresom możesz precyzyjnie kontrolować dane.
• Atrybuty takie jak required, pattern, min, max i title są kluczowe dla walidacji.

Opanowanie tych mechanizmów to ważny krok w tworzeniu bezpiecznych i profesjonalnych formularzy!