<optgroup> în HTML

<select name="oras">
  <optgroup label="Moldova">
    <option>Iași</option>
  </optgroup>
</select>

Ce face <optgroup>

<optgroup> împarte opțiunile unui <select> în grupuri. Textul din atributul label apare în listă ca titlu îngroșat, iar opțiunile grupului sunt afișate dedesubt, ușor indentate. Titlul grupului nu poate fi selectat.

Atributul label este obligatoriu: fără el grupul nu are titlu. Cu disabled, toate opțiunile grupului devin gri și nu pot fi alese. Grupurile nu pot fi puse unul în altul: un <optgroup> conține doar elemente <option>.

Grupurile ajută la liste lungi, unde utilizatorul găsește mai ușor varianta dorită. Valoarea trimisă la server este doar cea a opțiunii alese; grupul nu se trimite.

Atribute

Atribut	Descriere
label	Titlul grupului, afișat în listă (obligatoriu).
disabled	Dezactivează toate opțiunile din grup.

Exemple

Exemplul 1: Orașe grupate pe regiuni

Titlurile Moldova și Transilvania nu pot fi alese; serverul primește doar orașul.

<label for="oras">Orașul de livrare</label>
<select id="oras" name="oras">
  <optgroup label="Moldova">
    <option value="iasi">Iași</option>
    <option value="suceava">Suceava</option>
  </optgroup>
  <optgroup label="Transilvania">
    <option value="cluj">Cluj-Napoca</option>
    <option value="brasov">Brașov</option>
  </optgroup>
</select>

Ce afișează browserul

Lista deschisă arată:
Moldova (îngroșat)
   Iași
   Suceava
Transilvania (îngroșat)
   Cluj-Napoca
   Brașov
Dacă alegi Brașov, serverul primește oras=brasov.

Exemplul 2: Grup dezactivat

Livrarea în weekend nu este disponibilă încă, așa că tot grupul este dezactivat.

<select name="interval">
  <optgroup label="Luni – Vineri">
    <option>09:00 – 13:00</option>
    <option>13:00 – 18:00</option>
  </optgroup>
  <optgroup label="Weekend (în curând)" disabled>
    <option>Sâmbătă 10:00 – 14:00</option>
  </optgroup>
</select>

Ce afișează browserul

Primul grup are opțiuni care pot fi alese.
Grupul „Weekend (în curând)” și opțiunea lui apar gri și nu pot fi selectate.

Greșeli frecvente

• Punerea unui <optgroup> în alt <optgroup>: grupurile nu se pot imbrica, iar browserul afișează lista greșit.
• Folosirea unei <option disabled> ca titlu în locul unui grup: cititoarele de ecran o anunță ca opțiune indisponibilă, nu ca titlu de grup.
• Uitarea atributului label: grupul apare fără titlu.

Comenzi înrudite

• <select> și <option>: Creează un meniu derulant (drop-down list) de unde utilizatorul alege una sau mai multe opțiuni.
• <select multiple>: Lista din care utilizatorul alege mai multe opțiuni deodată, afișată ca o casetă cu mai multe rânduri vizibile.
• <form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.
• <label>: Etichetă accesibilă pentru un control de formular: dând clic pe etichetă, activezi sau bifezi câmpul asociat.