Poznaj Programowanie

Tagi HTML: option

Piotr Grochal 9 min. czytania

Tag <option> jest fundamentalnym elementem HTML, który definiuje poszczególne pozycje w listach wyboru. Choć wygląda niepozornie, to od niego zależy logika wyboru wartości w formularzach i jakość doświadczenia użytkownika.

Czym jest tag <option>?

Tag <option> reprezentuje pojedynczą opcję do wyboru w menu. Występuje wyłącznie wewnątrz elementów <select> lub <datalist>. To podstawowy „klocek” każdej listy rozwijanej w formularzach HTML.

Składnia i podstawowe zastosowanie

Najprostsza postać opcji wygląda tak:

<option>Nazwa opcji</option>

Praktycznie zawsze warto dodać atrybut value, aby wysyłana na serwer wartość była jednoznaczna i stabilna:

<select name="wybor">
<option value="opcja1">Pierwsza opcja</option>
<option value="opcja2">Druga opcja</option>
<option value="opcja3">Trzecia opcja</option>
</select>

Tekst widoczny dla użytkownika może być opisowy, natomiast wartość value powinna pozostać krótka i przyjazna backendowi.

Atrybuty tagu <option>

Poniżej znajdziesz szybkie porównanie najczęściej używanych atrybutów:

Atrybut Działanie Domyślnie Wskazówka
value Wartość wysyłana w formularzu Treść elementu Zawsze ustawiaj jawnie, aby nie zależeć od tekstu wyświetlanego.
selected Ustawia opcję jako wstępnie wybraną Brak Używaj oszczędnie; preferuj czytelne domyślne placeholdery.
disabled Wyłącza możliwość wyboru opcji Aktywna Stosuj, gdy opcja jest tymczasowo niedostępna (np. brak towaru).
label Dostarcza etykietę używaną, gdy brak treści wewnątrz <option> Brak Dodaj zawartość tekstową lub użyj label jako zwięzłej etykiety.

value

Atrybut value określa wartość wysyłaną na serwer. Gdy go nie podasz, zostanie użyta treść opcji.

<select name="owoc">
<option value="jablko">Jabłko</option>
<option value="gruszka">Gruszka</option>
<option value="banan">Banan</option>
</select>

selected

selected ustawia wstępnie zaznaczoną opcję po załadowaniu strony.

<select name="owoc">
<option>Ananas</option>
<option>Banan</option>
<option>Kokos</option>
<option>Malina</option>
<option selected>Truskawka</option>
<option>Wiśnia</option>
</select>

Nie nadużywaj domyślnych wyborów – użytkownik powinien świadomie potwierdzić swój wybór.

disabled

disabled sprawia, że opcja staje się niedostępna do wskazania.

<select name="owoc">
<option>Ananas</option>
<option>Banan</option>
<option>Kokos</option>
<option disabled>Malina</option>
<option>Truskawka</option>
<option>Wiśnia</option>
</select>

Przykładowe wyróżnienie opcji wyłączonych w CSS:

option:disabled {
color: #888;
}

label

label pozwala ustawić etykietę opcji (wyświetlaną, gdy element nie ma treści).

<select name="muzyka">
<option label="techno" value="rodzaj-1"></option>
<option label="rock" value="rodzaj-2"></option>
<option label="pop" value="rodzaj-3"></option>
<option label="trance" value="rodzaj-4"></option>
</select>

Użycie z elementem <select>

Najczęściej <option> buduje klasyczne menu rozwijane wewnątrz <select>:

<label for="cars">Wybierz samochód:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>

Użycie z elementem <datalist>

<datalist> dostarcza podpowiedzi dla pola tekstowego – opcje stają się sugestiami wpisu:

<label for="browser">Wybierz przeglądarkę z listy:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>

Grupowanie opcji za pomocą <optgroup>

Przy dłuższych listach grupuj powiązane pozycje za pomocą <optgroup> dla lepszej nawigacji:

<label for="cars2">Wybierz samochód:</label>
<select id="cars2" name="cars2">
<optgroup label="Samochody Szwedzkie">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Samochody Niemieckie">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>

Inny przykład grupowania treści:

<select name="multimedia">
<optgroup label="Rodzaj Muzyki">
<option>Techno</option>
<option>Rock</option>
<option>Pop</option>
<option>Trance</option>
</optgroup>
<optgroup label="Rodzaj Filmu">
<option>Akcja</option>
<option>Dramat</option>
<option>Komedia</option>
</optgroup>
</select>

Grupowanie znacząco ułatwia wybór – zwłaszcza na urządzeniach mobilnych.

Praktyczne przykłady

Formularz rejestracji

Przykładowy formularz z dwoma listami rozwijanymi:

<form action="submit.php" method="POST">
<fieldset>
<legend>Rejestracja Użytkownika</legend>

<label for="country">Kraj:</label>
<select id="country" name="country" required>
<option value="">-- Wybierz kraj --</option>
<option value="pl">Polska</option>
<option value="de">Niemcy</option>
<option value="uk">Wielka Brytania</option>
<option value="fr">Francja</option>
</select>

<label for="age">Przedział wiekowy:</label>
<select id="age" name="age">
<option value="18-25">18–25 lat</option>
<option value="26-35">26–35 lat</option>
<option value="36-50">36–50 lat</option>
<option value="50+">50+ lat</option>
</select>

<button type="submit">Zarejestruj się</button>
</fieldset>
</form>

Dynamiczne dodawanie opcji za pomocą JavaScript

Tak możesz programowo dodawać, wybierać i usuwać elementy <option>:

const select = document.getElementById('moja-lista');

// dodanie nowej opcji
const nowaOpcja = document.createElement('option');
nowaOpcja.value = 'nowa-wartosc';
nowaOpcja.textContent = 'Nowa opcja';
select.appendChild(nowaOpcja);

// ustawienie nowej opcji jako wybranej
nowaOpcja.selected = true;

// usunięcie opcji o indeksie 2
select.remove(2);

// wyczyszczenie wszystkich opcji
select.innerHTML = '';

Stylowanie opcji za pomocą CSS

Stylowanie <select>/<option> jest ograniczone przez przeglądarki, ale podstawowe modyfikacje są możliwe:

select {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
}
option {
padding: 10px;
}
option:disabled {
color: #999;
background-color: #f5f5f5;
}
option:checked {
background: linear-gradient(#1e90ff, #1e90ff);
background-color: #1e90ff;
color: #fff;
}

Pamiętaj: pełna kontrola wyglądu często wymaga niestandardowych komponentów (np. aria-combobox) lub bibliotek UI.

Atrybuty standardowe i zdarzenia

<option> obsługuje globalne atrybuty HTML5, m.in. id, class, title i style. Zdarzenia na samym <option> bywają obsługiwane niespójnie w różnych przeglądarkach, dlatego preferuj nasłuchiwanie zdarzenia change na elemencie <select>:

<select name="wybor" id="wybor">
<option value="1" class="standard">Opcja 1</option>
<option value="2" class="premium" title="To jest opcja premium">Opcja 2</option>
<option value="3" id="special-option">Opcja 3</option>
</select>

<script>
document.getElementById('wybor').addEventListener('change', (e) => {
alert('Wybrano wartość: ' + e.target.value);
});
</script>

Ważne zagadnienia związane z <option>

Domyślne opcje

Dobra praktyka to dodanie pustej, neutralnej opcji na początku listy, aby wymusić świadomy wybór:

<select name="owoc">
<option value="">-- Nie wybrano --</option>
<option>Ananas</option>
<option>Banan</option>
<option>Kokos</option>
</select>

Różnica między tekstem a wartością

Tekst widzi użytkownik, a wartość przetwarza system – rozdzielenie tych ról porządkuje logikę:

<select name="preferencja_klienta">
<option value="opt_001">Bardzo mi się podoba</option>
<option value="opt_002">Podoba mi się</option>
<option value="opt_003">Obojętnie</option>
<option value="opt_004">Nie podoba mi się</option>
<option value="opt_005">Bardzo mi się nie podoba</option>
</select>

Znaczniki zamykające

Znacznik otwierający <option> jest obowiązkowy, a zamykający </option> bywa opcjonalny, jeśli po nim następuje kolejna opcja, <optgroup> lub koniec elementu nadrzędnego:

<!-- Poprawnie, bez tagów zamykających -->
<select>
<option>Opcja 1
<option>Opcja 2
<option>Opcja 3
</select>

<!-- Również poprawnie, z tagami zamykającymi -->
<select>
<option>Opcja 1</option>
<option>Opcja 2</option>
<option>Opcja 3</option>
</select>

Dla czytelności i spójności zawsze domykaj </option>.

Dobre praktyki i dostępność

Aby listy wyboru działały niezawodnie i były wygodne w użyciu, trzymaj się poniższych wskazówek:

  • Zawsze ustawiaj atrybut value – gwarantuje stabilne, przewidywalne wartości po stronie serwera;
  • Dodawaj neutralny placeholder – pierwsza opcja typu „– Wybierz –” pomaga uniknąć przypadkowego wyboru;
  • Grupuj długie listy przez optgroup – szybciej znajdziesz właściwą pozycję i poprawisz ergonomię na mobile;
  • Nasłuchuj change na select – zdarzenia na option są niespójne, dlatego logikę osadzaj na elemencie nadrzędnym;
  • Dbaj o dostępność – łącz select z etykietą label, stosuj zrozumiałe teksty i unikaj ukrywania istotnych informacji w title.