W HTML-u utworzono formularz. Jaki efekt działania poniższego kodu zostanie pokazany przez przeglądarkę, jeśli w drugie pole użytkownik wprowadził tekst "ala ma kota"?
<form>
<select>
<option value="v1">Kraków</option>
<option value="v2">Poznań</option>
<option value="v3">Szczecin</option>
</select><br>
<input type="password" />
</form>
Odpowiedź B jest prawidłowa, ponieważ pokazuje typowy sposób renderowania formularza HTML z elementem wyboru i polem hasła w przeglądarce. W kodzie HTML widzimy element select z trzema opcjami wyboru. Po zaznaczeniu jednej z opcji, jak Kraków, tworzy się rozwijane menu, które jest widoczne na obrazie jako pole z wybraną wartością. Drugim elementem formularza jest pole input typu password. Ten typ pola zamienia wpisany tekst na znaki maskujące, takie jak kropki lub gwiazdki, co widzimy na obrazie w odpowiedzi B. To jest standardowe zachowanie przeglądarek w przypadku pól hasła, mające na celu ochronę prywatności. W kodzie HTML nie ma elementów typu checkbox ani radio, co eliminowałoby inne prezentacje danych, takie jak checkboxy czy przyciski radiowe. Dobrą praktyką jest używanie pól hasła w formularzach tam, gdzie wymagane jest wprowadzenie danych, które powinny być chronione. Odpowiednie użycie elementów HTML zwiększa użyteczność i bezpieczeństwo aplikacji internetowej i jest zgodne z konwencjami projektowania UI.
Pozostałe odpowiedzi są niepoprawne z kilku powodów związanych z różnym renderowaniem elementów formularza HTML. Odpowiedź A pokazuje zastosowanie checkboxów, które są używane do wyboru wielu opcji z zestawu, ale nie są obecne w podanym kodzie HTML. Kod formularza zawiera element select, co sugeruje użycie rozwijanego menu, a nie checkboxów. Tym samym, A jest niepoprawna, ponieważ nie odzwierciedla struktury kodu. W odpowiedzi C widoczny jest poprawny element select, jednak pole hasła nie jest zamaskowane co nie jest zgodne z typowym zachowaniem pola input typu password w przeglądarkach. Hasła wprowadzane do formularzy są z reguły maskowane w celu ochrony danych użytkownika. Odpowiedź D przedstawia przyciski radiowe, które są stosowane, gdy użytkownik może wybrać tylko jedną opcję z grupy, co również nie odpowiada strukturze kodu HTML gdzie użyto rozwijanego menu poprzez element select. W HTMLu nie ma przycisków radiowych, co czyni tę odpowiedź niepoprawną. Typowe błędy myślowe prowadzące do wyboru nieprawidłowych odpowiedzi obejmują nieznajomość standardowego odwzorowania elementów HTML w przeglądarkach oraz brak zrozumienia różnicy między rodzajami pól wyboru i ich zastosowaniami. Znajomość tych podstawowych zasad pozwala na prawidłowe zrozumienie działania kodu HTML i jego reprezentacji w interfejsie użytkownika.