<optgroup>
Nazwana grupa opcji wewnątrz listy `<select>`.
- Wyświetlanie
- block
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Elementy
<option>
Przykład
#<label for="course">Kurs</label>
<select id="course" name="course">
<optgroup label="Frontend">
<option value="html">HTML i CSS</option>
<option value="js">JavaScript</option>
<option value="react">React</option>
</optgroup>
<optgroup label="Backend">
<option value="python">Python</option>
<option value="node">Node.js</option>
</optgroup>
</select>Definicja i zastosowanie
#Element <optgroup> grupuje powiązane opcje pod wspólnym nagłówkiem. Nazwę grupy podajesz w atrybucie label, a przeglądarka wyświetla ją jako nagłówek, którego nie da się wybrać.
Grupy porządkują długie listy: kursy według technologii, miasta według województw, godziny konsultacji według dni tygodnia. Grup nie można zagnieżdżać, a <optgroup> nie działa w <datalist>.
Atrybut disabled na grupie blokuje naraz wszystkie jej opcje, co jest wygodniejsze niż wyłączanie każdej z osobna.
Składnia
#<optgroup label="Nazwa grupy">
<option>…</option>
</optgroup>Atrybuty
#tekst
Nazwa grupy wyświetlana nad jej opcjami. Bez niej grupa nie ma nagłówka, więc zawsze ją podawaj.atrybut logiczny
Wyłącza wszystkie opcje w grupie. Są widoczne, ale nie da się ich wybrać.
Element obsługuje też wszystkie atrybuty globalne, takie jak class, id, style czy hidden.
Atrybuty w praktyce
#label
tekstNazwa grupy wyświetlana nad jej opcjami. Bez niej grupa nie ma nagłówka, więc zawsze ją podawaj.
<select name="hour" aria-label="Godzina konsultacji">
<optgroup label="Poniedziałek">
<option>17:00</option>
<option>18:00</option>
</optgroup>
<optgroup label="Środa">
<option>16:00</option>
</optgroup>
</select>disabled
atrybut logicznyWyłącza wszystkie opcje w grupie. Są widoczne, ale nie da się ich wybrać.
<select name="course" aria-label="Kurs">
<optgroup label="Dostępne teraz">
<option>HTML i CSS</option>
</optgroup>
<optgroup label="Wkrótce" disabled>
<option>Svelte</option>
<option>Rust</option>
</optgroup>
</select>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
#- Nazwa grupy nie jest wysyłana z formularzem. Jeśli serwer potrzebuje tej informacji, zapisz ją w
valueopcji, na przykładvalue="frontend-react". - Nie próbuj zagnieżdżać grup. Gdy potrzebujesz kilku poziomów, podziel wybór na dwie osobne listy.
Powiązane hasła
#- <select>Rozwijana lista, z której użytkownik wybiera jedną lub kilka opcji.
- <option>Pojedyncza opcja listy `<select>` albo podpowiedź w `<datalist>`.
- <datalist>Lista podpowiedzi dla pola `<input>`. Można wybrać propozycję albo wpisać własną wartość.
- <fieldset>Grupa powiązanych pól formularza z ramką i podpisem `<legend>`.
Widzisz błąd albo brakuje przykładu? Napisz do nas.