Który atrybut należy wstawić w miejsce kropek, aby przeglądarka wyświetliła komunikat o błędzie w przypadku kliknięcia przycisku "Zapisz" bez wypełnionego pola nazwisko? <form action="/skrypt.php" method="post">
<input type="text" name="nazwisko" ...>
<input type="submit" value="Zapisz">
</form>
Poprawną odpowiedzią jest atrybut „required”. Ten atrybut jest częścią wbudowanego mechanizmu walidacji formularzy HTML5 po stronie przeglądarki. Jeśli dodasz go do pola typu input, textarea czy select, przeglądarka automatycznie sprawdzi, czy użytkownik coś tam wpisał lub wybrał, zanim pozwoli wysłać formularz. W naszym przykładzie: <input type="text" name="nazwisko" required> sprawi, że kliknięcie przycisku „Zapisz” bez wypełnionego nazwiska wywoła komunikat błędu i formularz nie zostanie wysłany. To działa bez żadnego JavaScriptu i bez dodatkowego kodu po stronie serwera.
Moim zdaniem warto pamiętać, że „required” to nie tylko wygoda, ale też dobra praktyka UX – użytkownik od razu widzi, czego brakuje, a nie dopiero po przeładowaniu strony. Standard HTML5 jasno opisuje ten atrybut jako tzw. boolean attribute, czyli taki, który samą swoją obecnością w znaczniku włącza daną funkcję. Nie trzeba pisać required="required", chociaż przeglądarka i tak to zrozumie.
W praktyce używa się go bardzo często w formularzach rejestracji, logowania, zamówień: imię, nazwisko, e‑mail, hasło – wszędzie tam, gdzie pole jest obowiązkowe. Dobrze jest łączyć required z innymi atrybutami walidacyjnymi, np. type="email" czy pattern, żeby od razu kontrolować nie tylko to, czy coś wpisano, ale też czy ma poprawny format. Mimo wszystko, nawet przy użyciu required, nigdy nie wolno rezygnować z walidacji po stronie serwera, bo walidacja w przeglądarce może być wyłączona albo ominięta. Required traktuj jako pierwszą linię obrony i wygodne wsparcie dla użytkownika, a nie jedyne zabezpieczenie.
Moim zdaniem warto pamiętać, że „required” to nie tylko wygoda, ale też dobra praktyka UX – użytkownik od razu widzi, czego brakuje, a nie dopiero po przeładowaniu strony. Standard HTML5 jasno opisuje ten atrybut jako tzw. boolean attribute, czyli taki, który samą swoją obecnością w znaczniku włącza daną funkcję. Nie trzeba pisać required="required", chociaż przeglądarka i tak to zrozumie.
W praktyce używa się go bardzo często w formularzach rejestracji, logowania, zamówień: imię, nazwisko, e‑mail, hasło – wszędzie tam, gdzie pole jest obowiązkowe. Dobrze jest łączyć required z innymi atrybutami walidacyjnymi, np. type="email" czy pattern, żeby od razu kontrolować nie tylko to, czy coś wpisano, ale też czy ma poprawny format. Mimo wszystko, nawet przy użyciu required, nigdy nie wolno rezygnować z walidacji po stronie serwera, bo walidacja w przeglądarce może być wyłączona albo ominięta. Required traktuj jako pierwszą linię obrony i wygodne wsparcie dla użytkownika, a nie jedyne zabezpieczenie.
W tym zadaniu chodzi o wbudowaną walidację formularza w HTML, a dokładniej o to, żeby przeglądarka sama z siebie zablokowała wysłanie formularza, gdy pole nazwisko jest puste. Kluczowe jest zrozumienie, które atrybuty faktycznie wpływają na walidację, a które tylko zmieniają zachowanie lub wygląd elementu.
Atrybut „disable” brzmi podobnie do „disabled”, więc część osób może go kojarzyć z blokowaniem pola lub przycisku. Problem w tym, że poprawny atrybut HTML to „disabled”, a nie „disable”. Po drugie, disabled nie służy do wymuszania wypełnienia pola, tylko wręcz przeciwnie – całkowicie je wyłącza z użycia. Pole disabled nie jest edytowalne i w ogóle nie jest wysyłane z formularzem, więc absolutnie nie nadaje się do sprawdzania, czy użytkownik coś wpisał.
„Pattern” to już coś związanego z walidacją, ale działa inaczej niż required. Pattern przyjmuje wyrażenie regularne i sprawdza poprawność formatu wprowadzonej wartości, ale tylko wtedy, gdy w polu coś jest wpisane. Jeżeli pole jest puste i nie ma atrybutu required, przeglądarka uzna to za poprawne i formularz zostanie wysłany bez żadnego ostrzeżenia. Pattern nadaje się np. do weryfikacji numeru telefonu, kodu pocztowego czy konkretnego formatu identyfikatora, ale nie wymusza samo w sobie obowiązkowego wypełnienia.
Atrybut „checked” z kolei dotyczy zupełnie innego typu elementów formularza. Używa się go wyłącznie przy input type="checkbox" oraz input type="radio", aby zaznaczyć domyślnie daną opcję. Nie ma on żadnego wpływu na pola tekstowe typu text. Wstawienie checked do input type="text" jest po prostu błędem semantycznym i nie wywoła żadnego efektu walidacyjnego.
Typowym błędem myślowym przy tym pytaniu jest mieszanie pojęć: „coś blokuje” z „coś wymusza”. Required nie blokuje pola, tylko blokuje wysłanie formularza, jeśli pole jest puste. Disabled blokuje pole, ale nie ma nic wspólnego z wymaganiem danych. Pattern sprawdza format, ale nie wymusza istnienia wartości. Checked ustawia stan zaznaczenia, a nie obowiązkowość. Właśnie dlatego jedynym poprawnym atrybutem, który informuje przeglądarkę, że dane pole musi być wypełnione przed wysłaniem formularza, jest „required”.
Atrybut „disable” brzmi podobnie do „disabled”, więc część osób może go kojarzyć z blokowaniem pola lub przycisku. Problem w tym, że poprawny atrybut HTML to „disabled”, a nie „disable”. Po drugie, disabled nie służy do wymuszania wypełnienia pola, tylko wręcz przeciwnie – całkowicie je wyłącza z użycia. Pole disabled nie jest edytowalne i w ogóle nie jest wysyłane z formularzem, więc absolutnie nie nadaje się do sprawdzania, czy użytkownik coś wpisał.
„Pattern” to już coś związanego z walidacją, ale działa inaczej niż required. Pattern przyjmuje wyrażenie regularne i sprawdza poprawność formatu wprowadzonej wartości, ale tylko wtedy, gdy w polu coś jest wpisane. Jeżeli pole jest puste i nie ma atrybutu required, przeglądarka uzna to za poprawne i formularz zostanie wysłany bez żadnego ostrzeżenia. Pattern nadaje się np. do weryfikacji numeru telefonu, kodu pocztowego czy konkretnego formatu identyfikatora, ale nie wymusza samo w sobie obowiązkowego wypełnienia.
Atrybut „checked” z kolei dotyczy zupełnie innego typu elementów formularza. Używa się go wyłącznie przy input type="checkbox" oraz input type="radio", aby zaznaczyć domyślnie daną opcję. Nie ma on żadnego wpływu na pola tekstowe typu text. Wstawienie checked do input type="text" jest po prostu błędem semantycznym i nie wywoła żadnego efektu walidacyjnego.
Typowym błędem myślowym przy tym pytaniu jest mieszanie pojęć: „coś blokuje” z „coś wymusza”. Required nie blokuje pola, tylko blokuje wysłanie formularza, jeśli pole jest puste. Disabled blokuje pole, ale nie ma nic wspólnego z wymaganiem danych. Pattern sprawdza format, ale nie wymusza istnienia wartości. Checked ustawia stan zaznaczenia, a nie obowiązkowość. Właśnie dlatego jedynym poprawnym atrybutem, który informuje przeglądarkę, że dane pole musi być wypełnione przed wysłaniem formularza, jest „required”.