Lista rozwijana formularza

Lista rozwijana formularza to kontrolka pozwalająca wybrać jedną wartość ze zdefiniowanego wcześniej zbioru.

Budowa i działanie listy rozwijanej formularza

Lista rozwijana formularza, określana także jako pole wyboru typu select, jest kontrolką interfejsu użytkownika przeznaczoną do wskazania jednej wartości z wcześniej ustalonego zbioru. W stanie zamkniętym wyświetla zwykle aktualnie wybraną pozycję oraz przycisk lub ikonę otwierającą listę. Po rozwinięciu użytkownik otrzymuje zestaw dostępnych opcji i może zaznaczyć jedną z nich. Takie rozwiązanie ogranicza liczbę możliwych odpowiedzi i zmniejsza ryzyko wpisania danych w nieprawidłowym formacie.

W formularzu internetowym lista może być zbudowana za pomocą elementu HTML <select> zawierającego elementy <option>. Każda opcja może mieć tekst widoczny dla użytkownika oraz osobną wartość przekazywaną do aplikacji. Przykładowo tekst „Windows 11” może być powiązany z wartością „win11”, a tekst „Windows 10” z wartością „win10”. Aplikacja po wysłaniu formularza otrzymuje wartość wybranej opcji, a niekoniecznie jej pełny opis wyświetlany na ekranie.

Opcje, wartość domyślna i walidacja danych

Projektant formularza może ustawić pozycję wybraną domyślnie, dodać pozycję informacyjną typu „Wybierz opcję” albo oznaczyć kontrolkę jako wymaganą. Wymagana lista powinna uniemożliwiać wysłanie formularza bez rzeczywistego wyboru. Sam tekst zachęcający do wyboru nie zawsze jest poprawną wartością, dlatego często stosuje się pustą wartość początkową oraz atrybut required. Przeglądarka może wtedy wykonać podstawową walidację przed przesłaniem danych do serwera.

Lista rozwijana może również zawierać opcje nieaktywne, pogrupowane lub czasowo zablokowane. Atrybut disabled pozwala wyłączyć całą kontrolkę albo pojedynczą pozycję, natomiast optgroup służy do porządkowania długiego zestawu elementów według kategorii. Jeżeli opcje są pobierane dynamicznie, na przykład po wybraniu producenta laptopa, skrypt działający w przeglądarce może uzupełnić drugą listę odpowiednimi modelami. W takim przypadku serwer nadal powinien sprawdzić, czy przesłana wartość należy do dozwolonego zestawu, ponieważ dane z formularza nie mogą być uznawane za zaufane wyłącznie na podstawie walidacji w przeglądarce.

Obsługa klawiatury, ekranu i różnych przeglądarek

Standardowa lista oparta na <select> jest obsługiwana przez przeglądarki internetowe i system operacyjny. Użytkownik może zazwyczaj przejść do niej klawiszem Tab, otworzyć ją klawiszem spacji albo klawiszem Alt w połączeniu ze strzałką, a następnie wskazać pozycję za pomocą klawiszy kierunkowych. W zależności od systemu lista może być wyświetlana jako małe menu, pełnoekranowy wybór na urządzeniu mobilnym albo element natywnego interfejsu.

Kontrolka powinna mieć powiązaną etykietę, aby użytkownik wiedział, czego dotyczy wybór. W HTML można połączyć element <label> z listą za pomocą atrybutów for i id. Jest to istotne także dla osób korzystających z czytników ekranu. Nadmierne zastępowanie natywnego <select> własnym komponentem JavaScript może pogorszyć obsługę klawiaturą, działanie na urządzeniach dotykowych i zgodność z technologiami asystującymi. Jeżeli niestandardowy wygląd jest konieczny, komponent powinien zachować prawidłową semantykę, widoczny stan fokusu i możliwość wyboru bez użycia myszy.

Znaczenie listy wyboru podczas serwisowania komputera

Lista rozwijana jest często używana w formularzach zgłoszeń serwisowych do wyboru rodzaju urządzenia, producenta, systemu operacyjnego, rodzaju usterki albo preferowanego terminu kontaktu. Z punktu widzenia aplikacji poprawnie skonfigurowana kontrolka pozwala ujednolicić dane otrzymywane od klientów. Zamiast wielu różnych zapisów, takich jak „notebook”, „laptop” i „laptop PC”, formularz może przekazywać jedną ustaloną wartość, na przykład „laptop”. Ułatwia to filtrowanie zgłoszeń, sortowanie rekordów i przypisywanie spraw do odpowiedniej kategorii.

Problemy z listą rozwijaną mogą wynikać z błędów HTML, niepoprawnego skryptu, arkusza stylów, rozszerzenia przeglądarki albo uszkodzonego profilu użytkownika. Jeżeli lista nie otwiera się, nie reaguje na kliknięcie lub nie wysyła wybranej wartości, warto sprawdzić działanie formularza w aktualnej przeglądarce, wyłączyć nietypowe dodatki oraz zweryfikować, czy problem dotyczy jednego formularza, czy całego systemu. Warszawskie Pogotowie Komputerowe zajmuje się profesjonalną naprawą laptopów, komputerów PC i ich podzespołów, a podczas diagnostyki można również sprawdzić działanie przeglądarek, formularzy oraz oprogramowania odpowiedzialnego za obsługę takich kontrolek.