Jak zrobić listę rozwijaną w HTML? Kompletny poradnik z przykładami

Jeśli tworzysz formularz kontaktowy, panel rejestracji albo prosty quiz, lista rozwijana (ang. dropdown list) to jeden z najczęstszych elementów, po które sięga każdy webdeveloper.
Dzięki niej użytkownik może wybrać jedną lub kilka opcji z zamkniętej listy — bez wpisywania czegokolwiek ręcznie.
W tym poradniku zobaczysz, jak od podstaw zbudować listę rozwijaną w czystym HTML, jak działa tag <select>, jak ustawiać domyślną wartość i jak dodać grupy opcji.
Przykłady są gotowe do skopiowania — możesz je od razu przetestować!

Czym jest lista rozwijana w HTML?

Lista rozwijana w HTML to element formularza, który pozwala użytkownikowi wybrać jedną (lub czasami kilka) wartości z przygotowanej listy.
Technicznie opiera się na tagu <select>, w którym umieszczamy opcje (<option>).
W praktyce lista rozwijana świetnie sprawdza się, gdy masz więcej niż 2–3 możliwe odpowiedzi, np. wybór kraju, miasta czy roku urodzenia.
Co ważne, taka lista jest czytelna, oszczędza miejsce i minimalizuje błędy — bo użytkownik nie musi nic wpisywać ręcznie.

Podstawowy przykład listy rozwijanej

Najprostsza lista rozwijana składa się z tagu <select> i kilku opcji <option>.
Poniżej znajdziesz minimalistyczny przykład:

<label for="miasto">Wybierz miasto:</label>
<select id="miasto" name="miasto">
  <option value="warszawa">Warszawa</option>
  <option value="krakow">Kraków</option>
  <option value="wroclaw">Wrocław</option>
</select>

W tym przypadku użytkownik widzi jedną rozwijaną listę, z której może wskazać swoje miasto.
Po wysłaniu formularza do serwera trafia wartość value wybranej opcji.

Atrybuty <select> — co warto znać?

Znając sam <select> i <option> to dopiero początek.
Warto wiedzieć, jak działają najważniejsze atrybuty w <select>:

• name — to kluczowy atrybut, bo dzięki niemu wybrana wartość trafi do serwera pod konkretną nazwą.
• id — umożliwia powiązanie listy z <label> albo manipulację w JavaScript.
• multiple — pozwala na wybór wielu opcji naraz (użytkownik zaznacza je np. z CTRL).
• required — wymusza, żeby użytkownik wybrał przynajmniej jedną opcję przed wysłaniem formularza.

Tworzenie grup opcji za pomocą <optgroup>

Czasem jedna lista rozwijana ma wiele pozycji, które dobrze jest pogrupować — na przykład marki samochodów podzielone według kraju pochodzenia albo miasta według województw.
Właśnie do tego służy tag <optgroup>. Pozwala wizualnie oddzielić zestawy opcji, dzięki czemu lista jest czytelniejsza.

Przykład:

<label for="samochod">Wybierz markę samochodu:</label>
<select id="samochod" name="samochod">
  <optgroup label="Niemieckie">
    <option value="vw">Volkswagen</option>
    <option value="bmw">BMW</option>
  </optgroup>
  <optgroup label="Japońskie">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>

Jak widzisz, każda grupa ma swój atrybut label.
W efekcie użytkownik łatwiej znajdzie to, czego szuka — zwłaszcza jeśli lista jest długa.

Jak ustawić wartość domyślną w liście rozwijanej?

Dobrą praktyką UX jest podpowiedzenie użytkownikowi domyślnej opcji — szczególnie jeśli większość osób wybiera to samo.
W HTML robi się to za pomocą atrybutu selected wewnątrz <option>.

Przykład:

<label for="kraj">Wybierz kraj:</label>
<select id="kraj" name="kraj">
  <option value="polska" selected>Polska</option>
  <option value="czechy">Czechy</option>
  <option value="slowacja">Słowacja</option>
</select>

W tym przykładzie od razu po załadowaniu strony Polska jest wybrana jako domyślna.
Pamiętaj, tylko żeby domyślna opcja miała sens — bo jeśli użytkownik przeoczy wybór, formularz wyśle tę wartość.

Lista rozwijana z wielokrotnym wyborem

Jeśli chcesz dać użytkownikowi możliwość wyboru kilku opcji naraz, wystarczy dodać atrybut multiple do <select>.
Wtedy lista zmienia się w pole z wieloma zaznaczeniami — użytkownik może użyć klawisza CTRL lub SHIFT.

Przykład:

<label for="jezyki">Wybierz języki, które znasz:</label>
<select id="jezyki" name="jezyki[]" multiple>
  <option value="pl">Polski</option>
  <option value="en">Angielski</option>
  <option value="de">Niemiecki</option>
</select>

Uwaga UX:

• Lista z wielokrotnym wyborem może być mniej intuicyjna na mobile, bo wymaga precyzji.
• Czasem lepiej rozważyć checkboxy — są czytelniejsze i prostsze w obsłudze na telefonach.

Stylizacja listy rozwijanej CSS-em

Domyślny wygląd <select> zależy od przeglądarki i systemu operacyjnego.
Jeśli chcesz, możesz zmienić styl listy rozwijanej — ale pamiętaj, że pełna kontrola jest trudna, bo <select> ma swoje ograniczenia.

Co możesz zmienić CSS-em?

• szerokość i wysokość (width, height)
• kolory (background-color, color)
• obramowanie (border)
• czcionkę (font-family)

Przykład:

select {
  width: 200px;
  padding: 8px;
  border: 1px solid #999;
  border-radius: 4px;
  background-color: #f9f9f9;
}

Na co uważać?

• Nie wszystkie style działają tak samo we wszystkich przeglądarkach.
• Jeśli chcesz pełnej kontroli nad wyglądem, możesz rozważyć customową listę rozwijaną z HTML + CSS + JavaScript — ale to bardziej zaawansowane rozwiązanie.

Obsługa listy rozwijanej w JavaScript (opcjonalnie)

Czasami trzeba odczytać, co użytkownik wybrał, albo zareagować na zmianę opcji w <select>.
JavaScript (lub czysty JS, albo jQuery) daje pełną swobodę.

Przykład: odczyt wybranej opcji

<label for="kolor">Wybierz kolor:</label>
<select id="kolor">
  <option value="czerwony">Czerwony</option>
  <option value="zielony">Zielony</option>
  <option value="niebieski">Niebieski</option>
</select>

<p id="wynik"></p>

<script>
  const select = document.getElementById('kolor');
  const wynik = document.getElementById('wynik');

  select.addEventListener('change', function() {
    wynik.textContent = `Wybrałeś kolor: ${this.value}`;
  });
</script>

Po zmianie opcji skrypt wstawia wartość do <p>.
Tyle wystarczy, żeby zrobić dynamiczne formularze albo walidację.

Najczęstsze błędy i dobre praktyki

Dostępność (Accessibility)

• Zawsze łącz <label> z <select> przez for i id. To ułatwia korzystanie z listy osobom korzystającym z czytników ekranu.
• Jeśli lista jest długa — rozważ grupowanie <optgroup>.

Używaj atrybutu value

Każda <option> powinna mieć value, żeby backend wiedział, co przesłać. Jeśli go braknie — przesyłana jest treść między <option>, co czasem psuje walidację.

Daj fallbacki

Jeśli lista generuje się dynamicznie — dodaj wartość domyślną (selected) lub placeholder w stylu „Wybierz…”, żeby użytkownik nie przesłał pustej wartości przez pomyłkę.

Podsumowanie — jak tworzyć listy rozwijane, które działają

Dobra lista rozwijana to prosty HTML, sensownie pogrupowane opcje i czytelny label.
Jeśli trzeba, możesz dołożyć selected (wartość domyślna) albo multiple, a w JavaScript odczytać wybór.

Najważniejsze:

• Nie przesadzaj z długością listy — jeśli jest za długa, rozważ wyszukiwarkę.
• Dbaj o dostępność — label, grupy, wartości.
• Testuj na mobile! Upewnij się, że lista działa wygodnie na dotykowym ekranie.

Dzięki temu Twoje formularze będą przyjazne, proste i bezpieczne w obsłudze.

Źródła:

CyberPlac, Lista rozwijana w HTML (Poradnik), 23 czerwca 2025, dostęp: 30 czerwca 2025, dostępny online: https://cyberplac.pl/lista-rozwijana-w-html-poradnik/