W języku HTML zapisano formularz.
<form> <input type="radio" name="miasto" value="v1"> Kraków <br> <input type="radio" name="miasto" value="v2"> Poznań <br> <input type="radio" name="miasto" value="v3"> Szczecin <br> <input type="password"> </form>Który z efektów działania kodu będzie wyświetlony przez przeglądarkę, zakładając, że w pole hasła użytkownik wpisał wartość „ala ma kota”?
Efekt 1.
Efekt 2.
Efekt 3.
Efekt 4.
Poprawnym wynikiem jest Efekt 4. Kod tworzy formularz z trzema polami typu radio opisanymi tekstami: Kraków, Poznań i Szczecin. Wszystkie mają ten sam atrybut name="miasto", więc należą do jednej grupy - użytkownik może zaznaczyć najwyżej jedną z tych opcji. Ponieważ w żadnym polu radio nie użyto atrybutu checked, po wyświetleniu formularza żadna opcja nie jest domyślnie zaznaczona. Znaczniki br powodują przejście do następnej linii po każdej opcji. Ostatnie pole ma type="password", dlatego wpisana wartość „ala ma kota” nie jest pokazywana jawnie, tylko jako znaki maskujące. W praktyce type="password" stosuje się do haseł, a value w radio określa wartość wysyłaną po zatwierdzeniu formularza.
Nie każdy efekt z widocznym formularzem pasuje do podanego kodu HTML. Efekt 1 byłby trafny tylko wtedy, gdyby przedstawiał dokładnie trzy przyciski radio w jednej grupie, bez domyślnego zaznaczenia, oraz pole hasła z zamaskowanym tekstem. Jeśli pokazuje jawne „ala ma kota” albo zaznaczoną opcję bez atrybutu checked, nie wynika to z kodu. Efekt 2 odpowiadałby raczej sytuacji, w której zastosowano pola checkbox albo różne wartości atrybutu name, ponieważ wtedy możliwe byłoby niezależne zaznaczanie wielu pozycji. W tym formularzu wszystkie pola radio mają name="miasto", więc tworzą jedną grupę. Efekt 3 byłby właściwy dla innej konfiguracji pola tekstowego, na przykład input type="text", gdzie wpisana treść jest widoczna. Poprawnym wyborem jest Efekt 4. Typowy błąd polega na utożsamieniu wartości wpisanej w pole password z tym, co przeglądarka pokazuje użytkownikowi na ekranie.