Który przykład kodu HTML5 zostanie zakwalifikowany przez walidator jako błędny?

Przykład kodu HTML5, który zostanie zakwalifikowany przez walidator jako błędny, to taki, w którym zastosowano nieprawidłową składnię lub użyto atrybutów niezgodnie ze specyfikacją. Walidator HTML5 sprawdza nie tylko poprawność składniową, ale także przestrzeganie zasad dotyczących atrybutów i dozwolonych wartości. Poniżej znajdziesz szczegółowe wyjaśnienie z praktycznymi przykładami stosowania oraz omówienie najczęstszych błędów.

Najczęstsze błędy prowadzące do niezaliczenia walidacji

• Brak zamknięcia znacznika,
• użycie niewłaściwych lub nieobsługiwanych atrybutów,
• niezgodność wartości atrybutów z ich typem,
• powtarzanie identyfikatorów (ID powinno być unikalne),
• niepoprawne zagnieżdżenie elementów.

Przykład kodu błędnego

<form> 
  <input type="email" required min="3"> 
  <input type="number" min="5" max="2"> 
  <input type="text" pattern="[A-Z{3,}"> 
  <button type="submit">Wyślij</button> 
</form> 

Analiza błędów

• <input type="email" required min="3">
  Atrybut min nie jest obsługiwany dla typu email. Powoduje to błąd walidatora – taki atrybut powinien być stosowany tylko z typami liczbowymi (number, range) lub date[time].
• <input type="number" min="5" max="2">
  Wartość max jest mniejsza niż min, co jest niezgodne ze specyfikacją – walidator to wykaże.
• <input type="text" pattern="[A-Z{3,}">
  Wartość atrybutu pattern zawiera błąd składniowy (niezamknięty nawias klamrowy oraz niepoprawnie zdefiniowany wzorzec wyrażenia regularnego). Przeglądarka oraz walidator potraktują taki wzorzec jako nieprawidłowy, przez co pole nigdy nie będzie uznawane za prawidłowe.

Poprawne przykłady zastosowań atrybutów walidacyjnych HTML5

Pole e-mail tylko dla adresów email

<input type="email" name="user_email" required>

• Wartość musi być poprawnym adresem email.

Pole liczby z zakresem od 5 do 10

<input type="number" name="age" min="5" max="10" required>

• Warunki min/max mają sens i są zgodne ze specyfikacją.

Pole tekstowe wymagające trzech dużych liter

<input type="text" pattern="[A-Z]{3}" title="Wprowadź trzy wielkie litery">

• Poprawne wyrażenie regularne w pattern.

Najważniejsze zasady poprawnej walidacji HTML5

• Stosuj odpowiednie typy pól (text, email, number itd.) i dobieraj do nich odpowiednie atrybuty (min, max, pattern),
• unikaj stosowania niedozwolonych kombinacji atrybutów (np. min w polu tekstowym),
• zawsze zamykaj znaczniki i pilnuj poprawnej kolejności atrybutów,
• staraj się, by każdy identyfikator (ID) był unikalny na stronie,
• w przypadku złożonej logiki walidacji (np. porównywanie pól, unikalność w bazie danych), uzupełniaj walidację HTML5 walidacją po stronie serwera.

Podsumowanie praktyczne

Walidator HTML5 nie tylko sprawdza składnię, lecz także poprawność logiczną zastosowanych atrybutów i ich wartości względem typu pola formularza. Najczęściej popełniane błędy to niepoprawne użycie atrybutów, błędy w wyrażeniach regularnych i niezgodność wartości. Każdy formularz powinien być dodatkowo walidowany po stronie serwera, bo walidacja HTML5 jest ograniczona i może zostać ominięta przez użytkownika.

Stosuj się do powyższych zasad, a Twoje formularze HTML5 będą nie tylko przyjazne użytkownikom, ale też zgodne ze standardami i przejdą walidację zgodnie ze specyfikacją.