W HTML przeglądarka renderuje formularz na podstawie drzewa DOM i domyślnych reguł wyświetlania (tzw. user agent stylesheet). Dlatego w zadaniach typu "jak zostanie wyświetlony kod formularza" kluczowe jest odczytanie:
- jakie elementy są blokowe (zwykle zaczynają nową linię) oraz jakie są liniowe (układają się obok siebie),
- czy w kodzie występują wymuszenia przełamania wiersza (np. wstawione łamanie linii lub elementy blokowe między kontrolkami),
- jakie atrybuty wpływają na stan kontrolki (np. zaznaczenie, wybór pozycji, zablokowanie pola) i czy użytkownik może w nią wejść.
Typowe kontrolki formularza zachowują się w przewidywalny sposób: pola tekstowe, przyciski, listy wyboru i pola wielowierszowe mają swoje domyślne rozmiary, a etykieta powiązana z kontrolką (poprzez for/id lub zagnieżdżenie) poprawia czytelność i klikalność. Jeżeli w kodzie zastosowano grupowanie (np. ramkę z tytułem) albo podział na sekcje, przeglądarka zwykle wizualnie oddzieli te fragmenty.
Najczęstsze błędne interpretacje w takich pytaniach wynikają z kilku pułapek:
- Zakładanie obecności CSS – jeśli nie ma informacji o stylach, należy przyjąć wygląd domyślny, a nie np. nowoczesny układ "formularza z siatką".
- Mylenie atrybutów z układem – atrybuty typu name czy value nie ustawiają położenia elementu, a jedynie dane lub stan.
- Ignorowanie kolejności – elementy są renderowane w kolejności występowania w dokumencie, więc nawet drobna zmiana kolejności w kodzie zmienia wygląd.
W praktyce egzaminacyjnej warto czytać kod "od góry do dołu" i mentalnie składać UI: najpierw kontener formularza, potem kolejne etykiety i kontrolki, a na końcu przyciski. Gdy pojawia się grupa pól, zakładaj wyraźne wydzielenie sekcji. Dzięki temu wybór wariantu prezentacji staje się konsekwencją analizy kodu, a nie zgadywaniem.
