<input type="password" size="30" maxlength="20"> W formularzu HTML zastosowano znacznik <input>. Wyświetlone pole będzie służyło do wprowadzania...
<input type="password" size="30" maxlength="20">W formularzu HTML zastosowano znacznik
<input>. Wyświetlone pole będzie służyło do wprowadzania maksymalnieA. 20 znaków, które nie są widoczne w polu tekstowym.
B. 30 znaków, które są widoczne podczas wprowadzania.
C. 20 znaków, które są widoczne podczas wprowadzania.
D. 30 znaków, które nie są widoczne w polu tekstowym.
Pytanie z egzaminu CKE, styczeń 2020 (arkusz E.14-SG-20.01).
W tym fragmencie formularza najważniejsze są trzy atrybuty: type="password", size="30" oraz maxlength="20". Atrybut type="password" oznacza, że użytkownik wpisuje hasło, więc znaki nie są normalnie widoczne w polu tekstowym. Przeglądarka zwykle pokazuje kropki, gwiazdki albo inne symbole maskujące, żeby osoba stojąca obok nie mogła łatwo podejrzeć hasła. Atrybut maxlength="20" określa maksymalną liczbę znaków, które można wpisać do pola, czyli tutaj 20. Z kolei size="30" nie oznacza limitu znaków, tylko sugerowaną szerokość pola na ekranie, mniej więcej na 30 znaków. Moim zdaniem to jest częsty haczyk w testach, bo size wygląda jak ograniczenie długości, ale nim nie jest. W praktyce warto pamiętać, że ograniczenie po stronie HTML poprawia wygodę użytkownika, ale nie zastępuje walidacji po stronie serwera. Dane z formularza można podmienić ręcznie, więc aplikacja i tak powinna sprawdzić długość hasła np. w PHP, JavaScript albo backendzie. Dobra praktyka to łączyć maxlength z sensowną walidacją, komunikatem dla użytkownika i bezpiecznym przechowywaniem hasła jako skrótu, a nie zwykłego tekstu.
W tym przykładzie łatwo pomylić znaczenie atrybutów size i maxlength, bo oba mają wartości liczbowe i oba dotyczą pola formularza. Trzeba jednak rozdzielić wygląd pola od rzeczywistego ograniczenia danych. Atrybut size="30" wpływa głównie na szerokość kontrolki widocznej w formularzu. Można powiedzieć, że przeglądarka ma pokazać pole o rozmiarze mniej więcej pasującym do 30 znaków, chociaż dokładny wygląd zależy od stylów CSS, czcionki i przeglądarki. To nie jest limit wpisywanych znaków. Limit ustala dopiero maxlength="20", więc użytkownik powinien móc wprowadzić maksymalnie 20 znaków. Druga częsta pomyłka dotyczy widoczności znaków. Ponieważ ustawiono type="password", wpisywane znaki nie są prezentowane jako normalny tekst. Przeglądarka maskuje je, najczęściej kropkami lub gwiazdkami. Nie znaczy to, że hasło jest automatycznie szyfrowane albo bezpiecznie zapisane, tylko że nie jest jawnie widoczne w samym polu formularza. Z mojego doświadczenia uczniowie często czytają size jako „długość danych”, a type="password" jako coś związanego z bazą haseł. W HTML to nadal zwykłe pole formularza, tylko z innym sposobem wyświetlania. Dlatego odpowiedzi mówiące o 30 znakach albo o znakach widocznych podczas wpisywania nie pasują do działania tego elementu. Poprawne rozumowanie jest takie: maxlength daje 20 znaków, a type="password" powoduje ich ukrycie przed wzrokiem użytkownika i osób obok.