Walidacja formularzy w HTML5

Po co się tego uczymy?

To pierwsza linia obrony przed błędnymi danymi — zanim jeszcze napiszesz jakikolwiek kod PHP czy JavaScript, sama przeglądarka może odrzucić oczywiście złe dane (puste pole, zły format e-maila). To też bezpośredni, nazwany wprost efekt podstawy programowej INF.03.5.3.5.

Teoria

HTML5 dodał do formularzy wbudowaną walidację — przeglądarka sama sprawdza dane PRZED wysłaniem formularza, bez pisania jakiegokolwiek kodu JavaScript czy PHP.

Najważniejsze atrybuty walidacyjne:
required — pole musi być wypełnione.
type="email" — przeglądarka sprawdza, czy tekst wygląda jak adres e-mail (zawiera @ i domenę).
type="number" min="0" max="100" — wartość liczbowa w podanym zakresie.
minlength="8" / maxlength="20" — minimalna/maksymalna długość tekstu.
pattern="[0-9]{5}" — wyrażenie regularne, np. dokładnie 5 cyfr (kod pocztowy).
title="komunikat" — własny tekst podpowiedzi pokazywany przy błędzie pattern.

Bardzo ważne zastrzeżenie: walidacja HTML5 działa TYLKO w przeglądarce użytkownika. Można ją łatwo ominąć — wyłączając JavaScript, edytując kod strony w narzędziach deweloperskich, albo wysyłając dane bezpośrednio (np. programem typu Postman), z pominięciem formularza w ogóle. Dlatego każde dane, które trafiają do PHP, MUSZĄ zostać zweryfikowane PONOWNIE po stronie serwera (Lekcja 8 działu Aplikacje internetowe PHP) — walidacja HTML5 to wygoda dla uczciwego użytkownika, a nie zabezpieczenie przed złośliwym.

Schemat

Bez walidacji:                    Z walidacją HTML5:
┌──────────────────────┐          ┌──────────────────────┐
│ E-mail: [abc      ]  │          │ E-mail: [abc      ]  │
│      [ Wyślij ]      │          │  ⚠ Wpisz adres e-mail │
└──────────────────────┘          │      [ Wyślij ]      │
        |                         └──────────────────────┘
        v                                  |
   formularz wysłany                       v
   z błędnymi danymi              formularz NIE wysłany,
                                   przeglądarka pokazuje błąd

Przykład z życia

Kiedy próbujesz wysłać formularz z pustym wymaganym polem i przeglądarka sama podświetla je na czerwono z komunikatem "Wypełnij to pole" — to właśnie działanie atrybutu required, bez żadnego JavaScriptu.

Kod (HTML)

<form action="rejestracja.php" method="POST">
    <label for="email">E-mail:</label>
    <input type="email" id="email" name="email" required>

    <label for="haslo">Hasło (min. 8 znaków):</label>
    <input type="password" id="haslo" name="haslo" required minlength="8">

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

    <label for="kod_pocztowy">Kod pocztowy (format 00-000):</label>
    <input type="text" id="kod_pocztowy" name="kod_pocztowy"
           pattern="[0-9]{2}-[0-9]{3}"
           title="Wpisz kod pocztowy w formacie 00-000">

    <button type="submit">Zarejestruj się</button>
</form>

Komentarz i wyjaśnienie kodu

Atrybut pattern przyjmuje wyrażenie regularne — [0-9]{2}-[0-9]{3} oznacza "dokładnie 2 cyfry, myślnik, dokładnie 3 cyfry", czyli polski format kodu pocztowego. Jeśli użytkownik wpisze coś innego, przeglądarka pokaże tekst z atrybutu title jako podpowiedź, dlaczego dane są niepoprawne.

Ćwiczenie samodzielne

Dodaj do formularza rejestracji z Lekcji 3 walidację: pole e-mail jako type="email" i pole hasła z minlength="8".

Zadania do pracy własnej

Dodaj do dowolnego formularza pole numeru telefonu z pattern wymuszającym dokładnie 9 cyfr.
Zbuduj formularz oceny filmu z polem number ograniczonym do zakresu 1-10 oraz polem tekstowym na komentarz z maxlength="500".
Dodaj pełną walidację HTML5 do formularza dodawania filmu z Lekcji 3: tytuł jako required z maxlength, rok produkcji jako number z sensownym zakresem min/max, cena jako number z min="0" i step="0.01".

Typowe błędy

Najpoważniejszy błąd to przekonanie, że walidacja HTML5 WYSTARCZY i dane docierające do PHP są już bezpieczne — to nieprawda, każdy może ją ominąć. Drugi błąd: zbyt restrykcyjny pattern bez zrozumienia składni wyrażeń regularnych, przez co formularz odrzuca poprawne dane. Trzeci: zapomnienie atrybutu title przy pattern — użytkownik widzi wtedy tylko ogólny komunikat błędu bez wskazówki, jakiego formatu dane oczekuje formularz.

Nawiązanie do egzaminu zawodowego

To dosłowne brzmienie efektu INF.03.5.3.5 z podstawy programowej: "wykorzystuje mechanizmy walidacji formularzy za pomocą HTML5" — jeden z niewielu efektów kształcenia, który jest tak konkretnie i technicznie sformułowany wprost w oficjalnym dokumencie.