W języku HTML zapisano formularz. Który z efektów działania kodu będzie wyświetlony przez przeglądarkę, zakładając, że w pierwsze pole użytkownik przeglądarki wpisał wartość „Przykładowy text”?
<form> <textarea rows="3" cols="30"></textarea><br> <input type="radio"> Opcja1<br> <input type="radio"> Opcja2 </form>
Efekt 3.
Efekt 4.
Efekt 2.
Efekt 1.
Efekt 1. jest poprawny, ponieważ element textarea tworzy wielowierszowe pole tekstowe. Atrybut rows="3" ustala widoczną wysokość na 3 wiersze, a cols="30" szerokość pola na około 30 znaków. Po tym polu znajduje się br, więc następne kontrolki są pokazane od nowego wiersza. Dwa elementy input z type="radio" są wyświetlane jako okrągłe przyciski wyboru, obok tekstów Opcja1 i Opcja2; po Opcja1 użyto kolejnego przełamania wiersza, więc Opcja2 znajduje się poniżej. Wpisana treść „Przykładowy text” pojawia się w dużym polu tekstowym. W formularzach HTML radio button służy do wyboru opcji, a pełne powiązanie opcji w jedną grupę wymaga wspólnego atrybutu name.
W tym kodzie o wyglądzie formularza decydują konkretne typy kontrolek, a nie sama treść wpisana przez użytkownika. Efekt 2. przedstawia kwadratowe pola wyboru, czyli typowy wygląd checkboxów. Taki wynik pasowałby do elementów input z type="checkbox", a nie do type="radio". Efekt 3. pokazuje jednowierszowe pole tekstowe oraz prostokątne przyciski z napisami Opcja1 i Opcja2; taki układ wymagałby raczej pola input typu text i przycisków, na przykład button albo submit. Efekt 4. zawiera okrągłe przyciski radio, ale pierwsze pole jest jednowierszowe, więc odpowiadałoby elementowi input type="text", nie textarea z rows="3" i cols="30". Poprawny jest Efekt 1., bo kod tworzy wielowierszowe pole textarea oraz dwa okrągłe przyciski radio umieszczone pod nim. Typowy błąd polega na rozpoznawaniu formularza po napisach Opcja1 i Opcja2, zamiast po nazwach elementów i wartościach atrybutów type, rows oraz cols.