INF.03 · HTML i CSS
Walidacja formularzy w HTML5
Sprawdź dane przed wysłaniem.
- Przewidź efekt
- Zmień i sprawdź
- Zbuduj samodzielnie
Po tej lekcji: Zastosujesz ograniczenia HTML i rozpoznasz różnicę między błędem formatu a poprawnością danych.
Zrozum, zanim zapiszesz
required wymaga wartości; type="email" kontroluje format adresu, ale nie potwierdza istnienia skrzynki. type="number" min="1" max="8" step="1" ogranicza liczbę biletów do całkowitych wartości 1–8. minlength i maxlength dotyczą długości tekstu.
pattern="[0-9]{2}-[0-9]{3}" dopasowuje całą niepustą wartość, np. 12-345. Bez required puste pole nadal może być poprawne. Nie polegaj wyłącznie na title jako instrukcji: widocznie napisz oczekiwany format i połącz opis z polem przez aria-describedby.
Walidację przeglądarki można ominąć. Serwer musi sprawdzić dane ponownie, a zapytania SQL wymagają osobnych zabezpieczeń. novalidate wyłącza kontrolę przy wysyłaniu formularza; nie dodawaj go przypadkiem. :invalid styluje stan pola, ale nie zastępuje jasnego komunikatu.
Przykład do odtworzenia
<form action="rezerwacja.php" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="bilety">Liczba biletów (1–8)</label>
<input id="bilety" name="bilety" type="number" min="1" max="8" step="1" required>
<label for="kod">Kod pocztowy</label>
<p id="format-kodu">Wpisz 2 cyfry, myślnik i 3 cyfry, np. 12-345.</p>
<input id="kod" name="kod" pattern="[0-9]{2}-[0-9]{3}"
aria-describedby="format-kodu" required>
<button type="submit">Sprawdź i wyślij</button>
</form>Dobierz ograniczenie
| Atrybut | Przykład | Co sprawdza |
|---|---|---|
| required | required | Obecność wartości |
| min / max / step | min="1" max="8" step="1" | Zakres i krok liczby |
| minlength / maxlength | minlength="5" maxlength="500" | Długość wpisanego tekstu |
| pattern | pattern="[0-9]{2}-[0-9]{3}" | Cały niepusty tekst |
| type | type="email" | Format adresu, nie istnienie skrzynki |
Sprawdź w działaniu
Laboratorium ograniczeń HTML
Sprawdź puste pole, email bez @, kod 12-345 i liczbę poza zakresem. Przełącz required i odczytaj stan walidacji.
Najpierw przewidź zmianę. Potem wykonaj ją i wyjaśnij różnicę między kodem a efektem.
Ćwiczenie z pomocą · samodzielna praca
Zbuduj samodzielnie — z pomocą, gdy potrzebujesz
Dodaj do formularza wymagany email, liczbę biletów 1–8 i obowiązkowy kod pocztowy w formacie 12-345. Przy kodzie pokaż opis formatu. Wykonaj próby: pusty komplet, błędny email, 0 i 9 biletów, poprawny komplet. Zanotuj, które pole zatrzymuje każdą próbę.
Puste lub błędne dane są odrzucane, a poprawny komplet przechodzi lokalną walidację. To nie jest potwierdzenie zapisu na serwerze.
? Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź
Przy polach użyj required oraz odpowiednich type i granic.
Krok 2 — pokaż podpowiedź
Przy kodzie użyj pattern i widocznego opisu.
Krok 3 — pokaż podpowiedź
Po każdej poprawce sprawdź ponownie cały formularz, bo może zawierać więcej niż jeden błąd.
Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.
Sprawdź, zanim oddasz
Otwórz plik w przeglądarce i sprawdź, czy kod daje przewidywany wynik. Użyj narzędzi przeglądarki: Elements pokazuje elementy, Styles dopasowane reguły, a Network brakujące zasoby. Sprawdź kod w Nu HTML Checker; przy fragmentach wklej je do pełnego dokumentu z lang, charset, title i body. Komunikaty walidatora nie zastępują próby klawiaturą i kontroli czytelności.
Podsumowanie
Co warto zapamiętać
- Zastosujesz ograniczenia HTML i rozpoznasz różnicę między błędem formatu a poprawnością danych.
- Potrafisz wskazać w kodzie przyczynę widocznego efektu.
- Przed oddaniem sprawdzasz wynik w przeglądarce, nie tylko zapis pliku.
Dalej na swoim koncie
Rozgrzewki, quiz i zadania są w biurku ucznia.
Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.
Zaloguj się →