<select>

Rozwijana lista, z której użytkownik wybiera jedną lub kilka opcji.

Wyświetlanie: inline-block
Znacznik zamykający: Wymagany
Dozwolona zawartość: Elementy <option> i <optgroup>

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Atrybuty
Atrybuty w praktyce
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

HTML

<label for="lang">Język kursu</label>
<select id="lang" name="lang">
  <option value="pl" selected>Polski</option>
  <option value="en">Angielski</option>
  <option value="de">Niemiecki</option>
</select>

Podgląd

Definicja i zastosowanie

Element <select> tworzy listę wyboru. Opcje zapisujesz w elementach <option>, a powiązane opcje możesz pogrupować w <optgroup>. Po wysłaniu formularza na serwer trafia para name=value wybranej opcji.

Rozwijana lista oszczędza miejsce, gdy opcji jest dużo: kraj, województwo, język kursu. Przy dwóch, trzech opcjach często wygodniejsze są przyciski radiowe, bo wszystkie możliwości widać od razu, bez klikania.

Z atrybutem multiple lista zamienia się w pole, w którym można zaznaczyć kilka opcji (na komputerze z wciśniętym Ctrl lub Cmd). To rozwiązanie bywa mało intuicyjne, więc przy wielokrotnym wyborze rozważ zestaw pól wyboru checkbox.

Składnia

<select name="nazwa">
  <option value="a">Opcja A</option>
  <option value="b">Opcja B</option>
</select>

Atrybuty

name
tekst
Nazwa, pod którą wartość wybranej opcji trafi na serwer. Lista bez name nie zostanie wysłana.
multiple
atrybut logiczny
Pozwala zaznaczyć kilka opcji. Lista wyświetla się wtedy jako przewijane pole zamiast rozwijanego menu, a na serwer trafia osobna para name=value dla każdej zaznaczonej opcji.
size
liczba
Liczba widocznych wierszy listy. Wartość większa niż 1 zamienia rozwijane menu w stałe pole z listą, także bez multiple.
required
atrybut logiczny
Wymaga wybrania opcji z niepustą wartością. Popularny wzorzec to pierwsza opcja z pustym value, na przykład „Wybierz miasto…”, która działa jak podpowiedź i nie przejdzie walidacji.
disabled
atrybut logiczny
Wyłącza całą listę. Wartość wyłączonej listy nie jest wysyłana z formularzem.

Atrybut	Wartości	Opis
name	tekst	Nazwa, pod którą wartość wybranej opcji trafi na serwer. Lista bez `name` nie zostanie wysłana.
multiple	atrybut logiczny	Pozwala zaznaczyć kilka opcji. Lista wyświetla się wtedy jako przewijane pole zamiast rozwijanego menu, a na serwer trafia osobna para `name=value` dla każdej zaznaczonej opcji.
size	liczba	Liczba widocznych wierszy listy. Wartość większa niż 1 zamienia rozwijane menu w stałe pole z listą, także bez `multiple`.
required	atrybut logiczny	Wymaga wybrania opcji z niepustą wartością. Popularny wzorzec to pierwsza opcja z pustym `value`, na przykład „Wybierz miasto…”, która działa jak podpowiedź i nie przejdzie walidacji.
disabled	atrybut logiczny	Wyłącza całą listę. Wartość wyłączonej listy nie jest wysyłana z formularzem.

Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.

Atrybuty w praktyce

multiple

atrybut logiczny

Pozwala zaznaczyć kilka opcji. Lista wyświetla się wtedy jako przewijane pole zamiast rozwijanego menu, a na serwer trafia osobna para name=value dla każdej zaznaczonej opcji.

HTML

<label for="topics">Co Cię interesuje?</label><br>
<select id="topics" name="topics" multiple>
  <option value="frontend" selected>Frontend</option>
  <option value="backend">Backend</option>
  <option value="mobile" selected>Aplikacje mobilne</option>
  <option value="ai">Sztuczna inteligencja</option>
</select>

Podgląd

size

liczba

Liczba widocznych wierszy listy. Wartość większa niż 1 zamienia rozwijane menu w stałe pole z listą, także bez multiple.

HTML

<select name="level" size="3" aria-label="Poziom">
  <option>Początkujący</option>
  <option>Średniozaawansowany</option>
  <option>Zaawansowany</option>
</select>

Podgląd

required

atrybut logiczny

Wymaga wybrania opcji z niepustą wartością. Popularny wzorzec to pierwsza opcja z pustym value, na przykład „Wybierz miasto…”, która działa jak podpowiedź i nie przejdzie walidacji.

HTML

<form>
  <select name="city" required aria-label="Miasto">
    <option value="">Wybierz miasto…</option>
    <option value="krk">Kraków</option>
    <option value="waw">Warszawa</option>
    <option value="wro">Wrocław</option>
  </select>
  <button>Dalej</button>
</form>

Podgląd

disabled

atrybut logiczny

Wyłącza całą listę. Wartość wyłączonej listy nie jest wysyłana z formularzem.

HTML

<select name="plan" disabled aria-label="Plan">
  <option>Plan roczny</option>
</select>

Podgląd

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Zawsze łącz listę z etykietą <label>. Pierwsza opcja „Wybierz…” nie zastępuje etykiety.
Wygląd rozwijanej listy tylko częściowo da się zmienić w CSS. Nowy mechanizm pełnego stylowania (appearance: base-select) działa na razie tylko w części przeglądarek.
Przy bardzo długich listach, na przykład setkach miast, rozważ pole tekstowe z podpowiedziami <datalist>.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz HTML w kursie HTML i CSSZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs