Tag HTML <optgroup>
Il tag HTML <optgroup> raggruppa elementi in un elenco a discesa <select>, definito dal tag <option>. Vedi esempi.
Il tag HTML <optgroup> raggruppa elementi <option> correlati all'interno di un elenco a discesa <select>. L'attributo obbligatorio label definisce l'intestazione del gruppo, che il browser visualizza in grassetto, mentre le opzioni al suo interno vengono automaticamente indentate sotto di essa.
Perché e quando usare <optgroup>
Un elemento <select> con un lungo elenco piatto di opzioni è difficile da scorrere. Raggruppare le opzioni sotto intestazioni significative aiuta l'utente a trovare la scelta giusta più rapidamente. Usa <optgroup> quando:
- Il menu a discesa ha molte opzioni che rientrano in categorie naturali (paesi per continente, prodotti per tipo, font per famiglia).
- Vuoi un'intestazione visiva all'interno dell'elenco senza renderla un valore selezionabile — un'etichetta di gruppo non è mai selezionabile.
- Vuoi disabilitare un intero gruppo di opzioni contemporaneamente con un singolo attributo
disabled.
Il tag <optgroup> è un elemento associato ai moduli, quindi ha senso solo all'interno di un elemento <select> che si trova in un <form>.
Sintassi
Il tag <optgroup> viene usato in coppia: gli elementi <option> che raggruppa sono scritti tra i tag di apertura (<optgroup>) e di chiusura (</optgroup>).
Esempio del tag HTML <optgroup>:
Esempio di elenco a discesa
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="java">Java</option>
<option value="linux">Linux</option>
<option value="git">Git</option>
</optgroup>
</select>
</body>
</html>Risultato
Il browser renderizzerà un elenco a discesa con due gruppi:
- Books: HTML, CSS
- Snippets: Java, Linux, Git
Esempio del tag HTML <optgroup> con l'attributo disabled:
Esempio del tag HTML <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<optgroup disabled label="Quizzes">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="php">PHP</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="angularjs">AngularJS</option>
</optgroup>
</select>
</body>
</html>Risultato
Il browser renderizzerà un elenco a discesa con due gruppi:
- Quizzes (disabilitato): HTML, CSS, JavaScript, PHP — queste opzioni appaiono in grigio e non possono essere selezionate.
- Snippets: Git, AngularJS
Quando un gruppo è disabilitato, nessuna delle opzioni al suo interno può essere selezionata; l'intero gruppo viene disattivato in un unico punto, motivo per cui disabilitare il gruppo è più comodo che aggiungere disabled a ogni singolo <option>.
L'attributo disabled
disabled è un attributo boolean. La presenza dell'attributo significa "disabilitato" — va scritto da solo:
<optgroup disabled label="Quizzes">La forma precedente disabled="disabled" mostrata nell'esempio sopra funziona ancora per ragioni storiche, ma la forma abbreviata boolean è il modo moderno e consigliato. Non esiste disabled="false" — per abilitare il gruppo è sufficiente omettere l'attributo.
Usare <optgroup> con <select multiple>
I gruppi funzionano allo stesso modo in un elenco a selezione multipla. L'attributo multiple su <select> consente all'utente di scegliere più opzioni (Ctrl/Cmd-clic), e le intestazioni dei gruppi rimangono non selezionabili:
<select multiple size="8">
<optgroup label="Front-end">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</optgroup>
<optgroup label="Back-end">
<option value="php">PHP</option>
<option value="node">Node.js</option>
</optgroup>
</select>Regole e avvertenze
labelè obbligatorio. Se lo ometti, il gruppo viene renderizzato con una riga di intestazione vuota ed è HTML non valido — il raggruppamento perde significato sia per gli utenti vedenti che per le tecnologie assistive. Fornisci sempre un'etichetta descrittiva.- Accessibilità. I lettori di schermo annunciano il
labeldel gruppo quando l'utente si sposta al suo interno, quindi un'etichetta chiara (es. "Books", "Front-end") fornisce agli utenti un contesto essenziale sulla posizione nell'elenco. - Nessun annidamento. Un
<optgroup>non può essere inserito all'interno di un altro<optgroup>. Il raggruppamento è limitato a un solo livello; HTML non supporta i sottogruppi. - Supporto di stile incoerente. I browser renderizzano
<optgroup>e<option>usando i controlli nativi del sistema operativo, quindi il supporto CSS è molto limitato e incoerente. Chrome, Firefox e Safari ignorano molte proprietà — sfondi, padding e font spesso non hanno effetto. Il CSS seguente potrebbe funzionare in alcuni browser ed essere completamente ignorato in altri, quindi non farci affidamento. Se hai bisogno di elenchi raggruppati con uno stile personalizzato, crea un widget personalizzato con JavaScript invece di stilizzare un<select>nativo.
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| disabled | disabled | Indica che la selezione degli elementi del gruppo è disabilitata. |
| label | text | Definisce un'etichetta per il gruppo, che verrà visualizzata come intestazione nell'elenco a discesa. Attributo obbligatorio. |
Il tag <optgroup> supporta gli Attributi globali e gli Attributi evento.
Tag correlati
<select>— l'elenco a discesa che contiene i gruppi.<option>— gli elementi individuali raggruppati da<optgroup>.<form>— il modulo che invia il valore selezionato.
Come applicare stili al tag HTML <optgroup>
Come indicato nelle avvertenze sopra, il supporto del browser per lo stile dei controlli nativi dei moduli è limitato e incoerente. Dove viene rispettato, puoi usare CSS come questo per regolare l'intestazione del gruppo e le sue opzioni, ma verifica in ogni browser di destinazione prima di farci affidamento:
optgroup {
font-weight: bold;
color: #333;
}
optgroup option {
font-weight: normal;
padding-left: 15px;
}