Zawód: Technik informatyk , Technik programista
Kategorie: Tworzenie stron WWW Programowanie webowe
W tym fragmencie kodu HTML masz dwa bardzo ważne atrybuty: type="email" oraz required. To właśnie one razem powodują, że poprawna jest odpowiedź, że pole nie może być puste i wymaga wpisania tekstu ze znakiem @. Atrybut required oznacza, że pole jest obowiązkowe. Przeglądarka, zgodnie ze specyfikacją HTML5, nie pozwoli wysłać formularza, dopóki pole nie będzie wypełnione. Użytkownik kliknie przycisk „Zapisz”, a formularz po prostu się nie wyśle – pojawi się komunikat walidacyjny po stronie przeglądarki. To jest tzw. walidacja po stronie klienta, domyślnie wbudowana w HTML. Z kolei type="email" uruchamia specjalny mechanizm sprawdzania formatu wpisanego tekstu. Przeglądarka sprawdza, czy ciąg znaków wygląda jak adres e‑mail: musi zawierać co najmniej znak @ i jakąś część przed i po nim. To nie jest super zaawansowana walidacja, ale wystarcza jako pierwszy filtr, np. "[email protected]" przejdzie, a "jan.domena.pl" już nie. Moim zdaniem to bardzo wygodne, bo nie trzeba od razu pisać własnego JavaScriptu tylko po to, żeby odsiać oczywiste błędy. W praktyce w aplikacjach webowych zwykle łączy się tę prostą walidację HTML5 z dodatkowymi sprawdzeniami po stronie serwera (np. w PHP czy w innym backendzie), bo dane z formularza zawsze trzeba traktować z ograniczonym zaufaniem. Dobrym nawykiem jest też dodanie atrybutu name, np. name="email", żeby serwer mógł poprawnie odebrać wartość pola. Warto też wiedzieć, że niektóre przeglądarki mobilne, gdy widzą type="email", podpowiadają użytkownikowi specjalną klawiaturę z łatwym dostępem do znaku @ i kropki, co realnie poprawia wygodę wpisywania adresu. To taki mały szczegół, ale w profesjonalnych projektach UX ma znaczenie. Podsumowując: required blokuje puste wysłanie formularza, a type="email" wymusza poprawny, podstawowy format adresu ze znakiem @ – dokładnie to opisuje poprawna odpowiedź.