Poznaj Programowanie

Tagi HTML: select

Piotr Grochal 7 min. czytania

Element <select> reprezentuje rozwijane menu z opcjami, które umożliwia użytkownikowi wybranie jednej lub wielu wartości z predefiniowanej listy. To jeden z fundamentalnych elementów formularzy HTML, najczęściej używany w połączeniu z elementami <option> i <optgroup>.

Podstawowa struktura i użycie

Najprostsza lista rozwijana może wyglądać tak:

<select>
<option value="ruby">Ruby</option>
<option value="php">PHP</option>
<option value="cpp">C++</option>
<option value="python">Python</option>
</select>

Element <select> musi posiadać zarówno znacznik otwierający, jak i zamykający. Wewnątrz umieszczamy elementy <option>, które reprezentują dostępne wybory. Każda opcja może mieć atrybut value, który przechowuje wartość przesyłaną podczas wysyłania formularza, niezależnie od widocznego tekstu.

Atrybuty specyficzne <select>

Poniżej znajdziesz najważniejsze atrybuty wraz z krótkim omówieniem:

  • name – identyfikuje pole w danych formularza i jest niezbędny przy wysyłce;
  • multiple – umożliwia zaznaczenie wielu opcji naraz;
  • size – określa liczbę widocznych wierszy listy (przy size=”1″ zachowuje się jak klasyczne menu rozwijane);
  • required – wymusza wybór opcji o wartości różnej od pustego łańcucha;
  • disabled – wyłącza kontrolkę z interakcji i wysyłki formularza (użytkownik nie może jej użyć);
  • autofocus – automatycznie ustawia fokus po załadowaniu strony;
  • form – wiąże kontrolkę z konkretnym formularzem, nawet jeśli znajduje się poza nim;
  • tabindex – definiuje pozycję w kolejności nawigacji klawiszem Tab.

Disabled

Atrybut logiczny wyłączający pole z działania – użytkownik nie może wchodzić w interakcję, a pole nie bierze udziału w wysyłce. Skrypty mogą nadal modyfikować jego stan. Przykład użycia:

<select disabled>
<option>Niedostępna opcja</option>
</select>

Name

Przypisuje nazwę kontrolną elementowi, która jest niezbędna do identyfikacji pola w danych formularza. Wartość nie może być pusta. Przykład nadania nazwy:

<select name="programowanie_jezyk">
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
</select>

Multiple

Atrybut logiczny pozwalający na wybór wielu opcji jednocześnie. Bez niego możliwy jest wybór tylko jednej opcji. Użytkownicy mogą zaznaczać wiele elementów, korzystając z klawisza Ctrl (lub Command na macOS). Przykład:

<select multiple>
<option>Panna cotta 75g</option>
<option>Tiramisu 150g</option>
<option>Crème brûlée 100g</option>
</select>

Size

Określa liczbę wierszy widocznych jednocześnie. Wartość musi być większa od zera. Ustawienie size="1" sprawia, że element działa jak standardowe menu rozwijane. Przykład:

<!-- Wyświetla 5 pozycji naraz -->
<select size="5">
<option>Opcja 1</option>
<option>Opcja 2</option>
<option>Opcja 3</option>
</select>

Required

Atrybut logiczny (HTML5) oznaczający, że musi zostać wybrana opcja o wartości niebędącej pustym łańcuchem. Przykład:

<select name="kraj" required>
<option value="">-- Wybierz kraj --</option>
<option value="pl">Polska</option>
<option value="de">Niemcy</option>
</select>

Autofocus

Atrybut HTML5 powodujący, że element automatycznie otrzymuje fokus po załadowaniu strony.

Form

Atrybut HTML5 służący do określania formularza, z którym związane jest menu, nawet jeśli element znajduje się poza formularzem.

Tabindex

Określa pozycję elementu w kolejności nawigacji przy użyciu klawisza Tab.

Grupowanie opcji – element <optgroup>

Gdy lista jest długa, warto ją organizować za pomocą <optgroup>. Atrybut label określa nazwę grupy widoczną dla użytkownika. Przykład grupowania:

<select>
<optgroup label="Owoce miękkie">
<option>Truskawki</option>
<option>Maliny</option>
<option>Poziomki</option>
</optgroup>
<optgroup label="Owoce twarde">
<option>Jabłka</option>
<option>Gruszki</option>
</optgroup>
</select>

Zaznaczenie domyślne

Aby zaznaczyć wybraną opcję domyślnie, użyj atrybutu selected. Przykład:

<select>
<option>Panna cotta 75g</option>
<option selected>Tiramisu 150g</option>
<option>Crème brûlée 100g</option>
</select>

Praktyczne przykłady

Prosty formularz z elementem <select>

Tak może wyglądać podstawowy formularz wyboru języka:

<form>
<label for="jezyk">Wybierz język programowania:</label>
<select id="jezyk" name="jezyk">
<option value="">-- Brak wyboru --</option>
<option value="python">Python</option>
<option value="javascript">JavaScript</option>
<option value="java">Java</option>
</select>
</form>

Lista z wielokrotnym wyborem

Przykład listy pozwalającej na zaznaczenie wielu opcji:

<form>
<label for="umiejetnosci">Twoje umiejętności:</label>
<select id="umiejetnosci" name="umiejetnosci" multiple>
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>React</option>
</select>
<p>Użyj Ctrl/Cmd, aby zaznaczyć wiele opcji.</p>
</form>

Organizacja opcji w grupy

Tak pogrupujesz systemy operacyjne na kategorie:

<select name="system_operacyjny">
<optgroup label="Systemy klasyczne">
<option value="windows">Windows</option>
<option value="macos">macOS</option>
<option value="linux">Linux</option>
</optgroup>
<optgroup label="Systemy mobilne">
<option value="ios">iOS</option>
<option value="android">Android</option>
</optgroup>
</select>

Stylizacja CSS

Stylizacja pól wyboru jest ograniczona i zależy od przeglądarki, ponieważ elementy <select> są kontrolkami systemowymi. Jednak nowoczesne przeglądarki coraz lepiej wspierają ich dostosowanie. Przykładowe reguły:

select {
padding: 10px;
font-size: 16px;
border: 2px solid #333;
border-radius: 4px;
background-color: #fff;
cursor: pointer;
}
select:focus {
outline: none;
border-color: #0066cc;
box-shadow: 0 0 5px rgba(0, 102, 204, 0.5);
}
select:disabled {
background-color: #f0f0f0;
cursor: not-allowed;
opacity: 0.6;
}

Obsługa JavaScriptem

Poniżej znajdziesz przykładowy kod do pracy z wartościami <select> oraz nasłuchiwania zmian:

// Pobranie wartości wybranej opcji
const select = document.getElementById('jezyk');
const wybrana = select.value;

// Nasłuchiwanie zmian
select.addEventListener('change', function (e) {
console.log('Wybrana opcja:', this.value);
});

// Dynamiczne dodawanie opcji
const nowaOpcja = document.createElement('option');
nowaOpcja.value = 'rust';
nowaOpcja.textContent = 'Rust';
select.appendChild(nowaOpcja);

// Uzyskanie wszystkich wybranych opcji (dla multiple)
const multiSelect = document.getElementById('umiejetnosci');
const wybrane = Array.from(multiSelect.selectedOptions).map(opt => opt.value);
console.log(wybrane);

Znaczenie atrybutu <label>

Zawsze warto używać elementu <label> powiązanego z <select> za pomocą atrybutu for. Przykład poprawnego powiązania:

<label for="preferowany_jezyk">Preferowany język:</label>
<select id="preferowany_jezyk" name="preferowany_jezyk">
<option value="pl">Polski</option>
<option value="en">English</option>
</select>

To poprawia dostępność i umożliwia użytkownikom klikanie na tekst etykiety, aby otworzyć menu.

Kiedy używać <select>

Element <select> jest idealnym rozwiązaniem, gdy:

  • mamy predefiniowaną listę opcji do wyboru,
  • chcemy zaoszczędzić miejsce w formularzu,
  • liczba opcji jest zbyt duża, aby używać checkboxów lub przycisków radio,
  • zależy nam na szybkim i jednoznacznym wyborze z listy.

Jeśli jednak potrzebujesz pełnej kontroli nad stylizacją i interakcjami, rozważ użycie JavaScriptu lub komponentów z frameworków UI, które oferują rozbudowane selektory.