W języku HTML zapisano formularz.
<form> <select> <option value="v1">Kraków</option> <option value="v2">Poznań</option> <option value="v3">Szczecin</option> </select> <br> <input type="text"> </form>Który z efektów działania kodu będzie wyświetlony przez przeglądarkę, zakładając, że w drugie pole użytkownik wpisał wartość „ala ma kota”?
Efekt 3.
Efekt 4.
Efekt 1.
Efekt 2.
Poprawny wynik to Efekt 3. Formularz zawiera pole wyboru select z trzema opcjami. W elemencie option atrybut value='v1', value='v2' lub value='v3' jest wartością przesyłaną z formularza, ale w kontrolce widoczny jest tekst zapisany między znacznikiem otwierającym i zamykającym, czyli Kraków, Poznań, Szczecin. Ponieważ żadna opcja nie ma atrybutu selected, przeglądarka domyślnie pokazuje pierwszą opcję - Kraków. Znacznik br przenosi następne pole do nowego wiersza, a input type='text' tworzy jednoliniowe pole tekstowe, w którym po wpisaniu pojawia się „ala ma kota”. W praktyce to typowy układ formularza: lista rozwijana do wyboru jednej wartości i pole tekstowe do wpisania krótkiej informacji. Częsta pułapka to mylenie value z tekstem widocznym na stronie.
Wybrany efekt nie odpowiada renderowaniu podanego formularza. Efekt 1 byłby trafny dla innego wyniku, na przykład wtedy, gdyby formularz pokazywał inną domyślną pozycję lub wartości atrybutów value zamiast etykiet opcji. W tym kodzie value='v1', value='v2' i value='v3' służą głównie do przesłania danych, a użytkownik widzi napisy Kraków, Poznań i Szczecin. Efekt 2 pasowałby do formularza, w którym lista byłaby stale rozwinięta albo element select miałby atrybut size; tutaj zwykły select jest listą rozwijaną z jedną widoczną pozycją. Efekt 4 odpowiadałby innemu układowi, na przykład bez przejścia do nowego wiersza albo z innym typem pola tekstowego. W podanym kodzie br przenosi input type='text' pod listę. Poprawnym wynikiem jest Efekt 3. Typowy błąd polega na ocenianiu wyglądu formularza według danych przesyłanych do serwera, a nie według tekstu faktycznie renderowanego przez przeglądarkę.