Lista rozwijana (ang. dropdown list) to jedno z najczęściej stosowanych rozwiązań w formularzach i interfejsach stron internetowych. Jest prosta w użyciu, wygodna dla użytkownika i bardzo łatwa do wdrożenia, nawet jeśli dopiero zaczynasz przygodę z HTML-em. W tym artykule pokażę Ci krok po kroku, jak stworzyć funkcjonalną i estetyczną listę rozwijaną, jak ją dostosować oraz kiedy warto jej użyć. To poradnik praktyczny – znajdziesz tu gotowy kod i minimum teorii.
Czym jest lista rozwijana (dropdown)?
Lista rozwijana to element formularza HTML, który pozwala użytkownikowi wybrać jedną z kilku dostępnych opcji. W odróżnieniu od pól tekstowych lub checkboxów dropdown ogranicza wybór do wcześniej zdefiniowanych wartości. Dzięki temu dane są spójne, a użytkownik nie musi niczego wpisywać ręcznie. Lista rozwijana sprawdza się wszędzie tam, gdzie trzeba wybrać np. miasto, kraj, kategorię produktu, rok urodzenia czy ilość sztuk.
Kiedy warto użyć listy rozwijanej na stronie?
Listy rozwijane są idealne, gdy chcesz zmusić użytkownika do wybrania jednej, konkretnej opcji z ustalonego zestawu. Dzięki nim unikasz błędów w pisowni, literówek i niespójności danych. To dobre rozwiązanie, gdy liczba opcji nie jest zbyt duża – np. 5–30 elementów. Gdy lista ma ponad 50 opcji, warto rozważyć pole wyszukiwania lub filtrowania.
Różnica między HTML a JavaScriptową listą rozwijaną
HTML-owa lista rozwijana to prosty, statyczny element, który wyświetla tylko to, co zostało wpisane w kodzie. Nie reaguje dynamicznie na działania użytkownika. Jeśli chcesz tworzyć bardziej interaktywne dropdowny (np. z filtrem wyszukiwania, zależne od innych pól formularza), potrzebujesz JavaScriptu. HTML daje podstawę, ale JavaScript pozwala iść o krok dalej i budować dynamiczne formularze.
Podstawowy kod HTML dla listy rozwijanej
Elementy <select> i <option> – wyjaśnienie
W HTML lista rozwijana tworzona jest za pomocą dwóch podstawowych znaczników: <select> i <option>. Znacznik <select> definiuje cały element rozwijany, a każdy <option> to jedna opcja do wyboru. Możesz przypisać opcjom atrybuty takie jak value, selected (domyślna opcja) czy disabled (opcja nieaktywna). Oto prosty szkielet:
<select name="miasto">
<option value="warszawa">Warszawa</option>
<option value="krakow">Kraków</option>
<option value="gdansk">Gdańsk</option>
</select>
Przykład prostej listy rozwijanej w HTML
Poniżej przykład listy rozwijanej, gdzie użytkownik wybiera swój ulubiony język programowania:
<label for="jezyk">Wybierz język:</label>
<select id="jezyk" name="jezyk">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
</select>
Ten prosty kod można umieścić bezpośrednio w formularzu, a przeglądarka automatycznie wyświetli rozwijaną listę. Po wybraniu opcji, jej wartość zostanie przesłana do serwera przy wysyłce formularza.
Jak dodać wartość domyślną i etykiety?
Ustawianie opcji domyślnej z atrybutem selected
Jeśli chcesz, żeby któraś opcja była zaznaczona domyślnie, dodaj do niej atrybut selected. Użytkownik zobaczy ją jako pierwszą na liście. Przykład:
<select name="kraj">
<option value="pl" selected>Polska</option>
<option value="de">Niemcy</option>
<option value="cz">Czechy</option>
</select>
To szczególnie przydatne, gdy znasz najczęstszy wybór użytkownika – np. Polska jako domyślny kraj dla użytkowników z Polski.
Dodanie opcji „Wybierz…” lub opisu listy
Dobrą praktyką UX jest dodanie pierwszej opcji typu „Wybierz z listy” z atrybutem disabled i selected. Dzięki temu użytkownik musi świadomie wybrać jedną z opcji i nie zostawi domyślnej wartości przez przypadek.
<select name="kategoria">
<option value="" disabled selected>Wybierz kategorię</option>
<option value="elektronika">Elektronika</option>
<option value="moda">Moda</option>
<option value="dom">Dom i ogród</option>
</select>
To poprawia jakość danych i zapobiega błędom w formularzu, zwłaszcza gdy lista jest częścią większego procesu (np. zamówienia czy rejestracji).
Stylowanie listy rozwijanej za pomocą CSS
Jak zmienić wygląd listy?
Domyślny wygląd <select> i <option> w HTML jest bardzo podstawowy i zależy od systemu operacyjnego oraz przeglądarki. Ale spokojnie – dzięki CSS możesz znacząco poprawić estetykę listy. Można ustawić m.in. kolory, marginesy, zaokrąglenia czy cienie. Warto jednak pamiętać, że <select> nie daje tyle swobody stylizacji, co np. przyciski czy pola tekstowe.
Dostosowanie szerokości, koloru i fontu dropdowna
Do stylizacji dropdowna możesz użyć właściwości takich jak width, font-family, color, background-color, border czy padding. Przykład:
select {
width: 200px;
padding: 8px;
font-size: 16px;
border-radius: 5px;
background-color: #f2f2f2;
border: 1px solid #ccc;
}
Dzięki takiemu podejściu dropdown lepiej wpasuje się w wygląd całej strony. W bardziej zaawansowanych projektach można też ukryć natywne strzałki i zastąpić je ikonami SVG, ale do tego potrzebny będzie również JavaScript.
Rozwijana lista HTML z JavaScript – dynamiczne zmiany
Jak odczytać wybraną wartość za pomocą JS?
HTML sam w sobie nie pozwala na interakcję z listą po stronie użytkownika – do tego potrzebny jest JavaScript. Aby odczytać, którą opcję użytkownik wybrał, wystarczy prosty kod:
const selectElement = document.querySelector('#jezyk');
selectElement.addEventListener('change', () => {
console.log('Wybrany język:', selectElement.value);
});
Taki skrypt działa dynamicznie – od razu po wyborze opcji możesz ją zapisać, wysłać lub użyć w innym miejscu strony.
Dodawanie opcji do listy w czasie rzeczywistym
Chcesz, żeby lista rozwijała się w zależności od działań użytkownika? Możesz dodać nowe <option> za pomocą JavaScriptu. Przykład:
const select = document.querySelector('#kategoria');
const nowaOpcja = document.createElement('option');
nowaOpcja.text = 'Sport';
nowaOpcja.value = 'sport';
select.add(nowaOpcja);
To przydatne np. w formularzach wieloetapowych albo gdy dane są ładowane z serwera (np. przez API).
Najczęstsze błędy przy tworzeniu list rozwijanych
Tworząc listę rozwijaną, warto unikać kilku podstawowych błędów. Po pierwsze – brak domyślnej opcji „Wybierz…” może prowadzić do nieczytelnych danych w formularzu. Po drugie – nieprzypisanie wartości value do <option> sprawi, że po stronie serwera nie wiadomo, co użytkownik wybrał. Kolejny błąd to zbyt długa lista, która utrudnia nawigację, zamiast ją ułatwiać. No i klasyka: zła walidacja – czyli brak sprawdzenia, czy użytkownik faktycznie coś wybrał.
Podsumowanie
Lista rozwijana to niepozorny, ale bardzo użyteczny element formularzy. Jest łatwa w użyciu, prosta w kodowaniu i pozwala znacznie poprawić doświadczenie użytkownika. Pamiętaj o podstawach: select, option, opcja domyślna, stylizacja i ewentualna integracja z JavaScriptem. Dzięki temu Twoje dropdowny będą działać sprawnie, wyglądać estetycznie i spełniać swoje zadanie. Warto eksperymentować i testować – szczególnie na różnych przeglądarkach, bo ich zachowanie może się nieco różnić.
Nazywam się Kacper Skalski i od lat pasjonuję się nowymi technologiami. Na moim blogu Cyber Plac dzielę się wiedzą z różnych dziedzin IT, od programowania i ścieżek rozwoju w branży, po marketing internetowy i obsługę komputera. Znajdziesz tu praktyczne porady, recenzje sprzętu, a także artykuły o grach, serialach i filmach, które stanowią świetną odskocznię po godzinach pracy.
