Poznaj Programowanie

Tagi HTML: optgroup

Piotr Grochal 7 min. czytania

W świecie formularzy HTML tag <optgroup> to niepozorny, ale niezwykle przydatny element, który pozwala na logiczne grupowanie opcji wewnątrz elementu <select>. Dzięki niemu listy rozwijane stają się czytelniejsze, szczególnie gdy mamy dziesiątki lub setki opcji do wyboru. Zamiast chaotycznej listy użytkownik widzi pogrupowane kategorie z etykietami, co znacząco poprawia user experience (UX).

Dobrze zaprojektowane grupy opcji przyspieszają wybór i redukują błędy, zwłaszcza w długich formularzach.

Wyobraź sobie formularz wyboru preferencji użytkownika – bez <optgroup> opcje mieszałyby się w jedną kupę, a z nim? Eleganckie sekcje jak „Owoce”, „Warzywa” czy „Środowiska programistyczne”. W tym wpisie przejdziemy od podstaw po atrybuty, przykłady, stylizację CSS i integrację z JavaScriptem. Zaczynamy!

Czym jest <optgroup> i do czego służy?

Element <optgroup> reprezentuje grupę opcji wyboru składającą się z elementów <option> osadzonych w nadrzędnym <select>. Służy do tworzenia wizualnych nagłówków nad powiązanymi opcjami, co ułatwia nawigację w długich listach:

  • główny cel – grupowanie pokrewnych opcji, np. produkty wg kategorii, kraje wg kontynentów czy technologie wg typów;
  • kontekst użycia – tylko jako dziecko elementu <select>; nie działa samodzielnie;
  • zawartość – wyłącznie elementy <option> (inne węzły, jak tekst czy skrypty, nie są dozwolone);
  • renderowanie – przeglądarki wyświetlają etykietę grupy jako pogrubiony nagłówek, a opcje poniżej, jednak dokładny wygląd zależy od przeglądarki.

Dzięki <optgroup> długa lista przestaje być przytłaczająca i staje się zrozumiałą mapą kategorii.

Podstawowa składnia i wymagane atrybuty

Oto prosta składnia – otwierający tag z atrybutem label, lista <option> i zamykający tag:

<select name="preferencje">
<optgroup label="Rodzaj muzyki">
<option>techno</option>
<option>rock</option>
<option>pop</option>
</optgroup>
<optgroup label="Rodzaj filmu">
<option>komedia</option>
<option>dramat</option>
</optgroup>
</select>

Najważniejsze atrybuty elementu <optgroup> to:

  • label – wymagany tekst etykiety grupy, np. label="Owoce"; wyświetlany jako nagłówek;
  • disabled – opcjonalnie wyłącza całą grupę (opcje stają się niewybieralne);
  • globalne atrybuty – id, class, style, title itp. do identyfikacji i stylizacji.

W HTML dozwolone jest pominięcie tagu zamykającego, jeśli po <optgroup> następuje kolejny <optgroup> lub koniec <select>.

Przykłady użycia w praktyce

1. Podstawowy formularz z grupami (muzyka i filmy)

Kompletny przykład z <fieldset> i <legend> dla lepszej semantyki i dostępności:

<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Przykład optgroup</title>
</head>
<body>
<form>
<fieldset>
<legend>Rodzaje muzyki oraz filmu</legend>
<select name="preferencje" id="preferencje">
<optgroup label="Rodzaj muzyki">
<option>techno</option>
<option>rock</option>
<option>pop</option>
<option>trance</option>
</optgroup>
<optgroup label="Rodzaj filmu">
<option>komedia</option>
<option>dramat</option>
<option>horror</option>
<option>dokument</option>
</optgroup>
</select>
<button type="submit">Zatwierdź</button>
</fieldset>
</form>
</body>
</html>

Efekt – w przeglądarce zobaczysz dwie grupy z czytelnymi etykietami nagłówków.

2. Grupowanie owoców i warzyw z disabled

Poniżej przykład z wyłączoną grupą – przydatne, gdy część opcji jest tymczasowo niedostępna:

<select name="roslina">
<optgroup label="Owoce">
<option>ananas</option>
<option>malina</option>
<option>truskawka</option>
</optgroup>
<optgroup label="Owoce sezonowe" disabled>
<option>jabłko</option>
<option>gruszka</option>
</optgroup>
<optgroup label="Warzywa">
<option>ziemniak</option>
<option>marchew</option>
</optgroup>
</select>

Grupa oznaczona jako disabled będzie wyszarzona i niewybieralna.

3. Zaawansowany przykład – środowiska programistyczne

Przykład grupowania narzędzi kierowany do deweloperów:

<select name="ide">
<optgroup label="Środowiska programistyczne">
<option value="netbeans">NetBeans</option>
<option value="eclipse">Eclipse</option>
<option value="visualstudio">Visual Studio</option>
</optgroup>
<optgroup label="Edytory tekstu">
<option value="vscode">VS Code</option>
<option value="sublime">Sublime Text</option>
</optgroup>
</select>

4. Grupowanie miast wg krajów

Krótkie, klarowne pogrupowanie miast:

<select name="miasto">
<optgroup label="Polska">
<option>Warszawa</option>
<option>Kraków</option>
</optgroup>
<optgroup label="Niemcy">
<option>Berlin</option>
<option>Monachium</option>
</optgroup>
</select>

Stylizacja CSS dla <optgroup>

Możliwości stylizacji <optgroup> są ograniczone i zależne od przeglądarki. Zwykle etykieta grupy jest pogrubiona, ale nie zawsze zastosują się tło, marginesy czy zaokrąglenia. Poniżej propozycja bezpiecznych reguł (testuj w docelowych przeglądarkach):

optgroup {
font-weight: 700;
color: #222;
}
optgroup:disabled {
color: #888;
}
option {
padding: 2px 4px;
}

Uwaga – nie wszystkie przeglądarki wspierają pełne stylizowanie <optgroup> (np. tło lub padding mogą być ignorowane). Testuj w Chrome, Firefox, Safari i na urządzeniach mobilnych.

Integracja z JavaScript

<optgroup> świetnie współpracuje z JS. Oto przykład dynamicznego dodawania grup i ich wyłączania:

// Dodaj nową grupę dynamicznie
const select = document.querySelector('select');
const newGroup = document.createElement('optgroup');
newGroup.label = 'Nowa kategoria';
newGroup.innerHTML = '&lt;option value="nowa"&gt;Nowa opcja&lt;/option&gt;';
select.appendChild(newGroup);

// Wyłącz pierwszą grupę po kliknięciu przycisku
document.querySelector('button')?.addEventListener('click', () => {
const group = document.querySelector('optgroup');
if (group) group.disabled = true;
});

// Odczyt wybranej wartości (ignoruje grupy, zwraca &lt;option value&gt;)
console.log(select.value);

Najlepsza praktyka – zdarzenia przypinaj do <select> lub deleguj z poziomu opcji; nie wszystkie przeglądarki obsłużą zdarzenia bezpośrednio na <optgroup>.

Najczęstsze błędy i dobre praktyki

Przed wdrożeniem upewnij się, że unikasz typowych pułapek i trzymasz się sprawdzonych zasad:

  • błąd – użycie <optgroup> poza <select>; nie zadziała;
  • błąd – brak atrybutu label; powoduje problemy z dostępnością i walidacją HTML;
  • dobra praktyka – łącz <select> z <label for="..."/> oraz zadbaj o czytelne label w grupach;
  • dobra praktyka – ograniczaj liczbę opcji do ok. 10–15 na grupę, by zachować czytelność;
  • kompatybilność – element jest wspierany w nowoczesnych przeglądarkach desktopowych i mobilnych; zawsze testuj stylizację;
  • zdarzenia – nie zakładaj, że atrybuty jak onclick zadziałają na <optgroup>; stosuj delegację zdarzeń do <select>.

Kiedy używać <optgroup>?

Poniżej proste wskazówki wyboru rozwiązania w zależności od kontekstu:

  • tak – długie listy (powyżej ~20 opcji) oraz jasno zdefiniowane kategorie tematyczne;
  • nie – krótkie listy (2–5 opcji), gdzie grupowanie tylko zaciemni przekaz;
  • alternatywy – <datalist> dla podpowiedzi w polach tekstowych lub biblioteki JS (np. Select2, Choices.js) dla wyszukiwania i tagowania.

Alternatywy i ich zastosowania – szybkie porównanie

Jeśli nie jesteś pewien, czy <optgroup> to najlepszy wybór, porównaj go z innymi rozwiązaniami:

Rozwiązanie Kiedy używać Główna zaleta Ograniczenie
<optgroup> Gdy masz wiele opcji i naturalne kategorie Czytelne grupowanie bez JS Ograniczona stylizacja i brak wyszukiwania
<datalist> Podpowiedzi podczas wpisywania tekstu Szybkie znajdowanie pozycji przez wpisywanie Brak grup i słaba kontrola stylu
Select2 / Choices.js Gdy potrzebne jest wyszukiwanie, tagowanie, multiselect Zaawansowane UX bez kompromisów Wymaga JS i dodatkowych zasobów