English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Il tag HTML <optgroup> crea un gruppo di opzioni nella lista a discesa del controllo <select>. Questi valori a discesa sono definiti da una serie di tag <option> e raggruppati utilizzando il tag <optgroup>. Il valore del label <optgroup> viene visualizzato come titolo grigio sopra il gruppo di elementi del controllo <select>. Questo tag è anche noto come elemento <optgroup>.
Raccogliamo le opzioni correlate utilizzando il tag <optgroup>:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Utilizzo del tag HTML <optgroup> (Guida di base oldtoolbag.com)</title> </head> <body> <label for="tutorial_choice">Tutorial: </label> <select id="tutorial_choice"> <optgroup label="Web"> <option value="html">HTML</option> <option value="css">CSS</option> </optgroup> <optgroup label="Database"> <option value="sql">SQL</option> <option value="oracle">Oracle</option> </optgroup> </select> </body> </html>Testa a vedere ›/›
In questo esempio di documento HTML5, abbiamo utilizzato il tag <optgroup> per creare due gruppi di opzioni nella lista a discesa. Il primo gruppo di opzioni ha il titolo Web e contiene due valori a discesa - HTML e CSS. Il secondo gruppo di opzioni ha il titolo "Database" e contiene due valori a discesa - SQL e Oracle.
IEFirefoxOperaChromeSafari
La maggior parte dei browser mainstream supporta l'etichetta <optgroup>.
L'etichetta <optgroup> organizza un gruppo di etichette <option> in un gruppo di opzioni con un titolo di gruppo.
Il valore dell'etichetta <optgroup> viene visualizzato come titolo grigio. Tutti gli elementi del gruppo vengono visualizzati come elenco di opzioni indented sotto il titolo.
Per impostazione predefinita, la prima opzione dell'etichetta <select> viene visualizzata come elemento selezionato. Gli utenti possono selezionare un altro elemento dalla lista a discesa.
Se hai molte combinazioni di opzioni, puoi utilizzare l'etichetta <optgroup> per raggruppare semplicemente le opzioni correlate.
| proprietà | valore | descrizione |
|---|---|---|
| disabled | disabled | Definire l'abilitazione dell'opzione di gruppo. |
| etichetta | testo | Definire una descrizione per il gruppo di opzioni. |
L'etichetta <optgroup> supporta le proprietà globali, consulta la tabella completa delle proprietà Proprietà globali HTML.
L'etichetta <optgroup> supporta tutti Proprietà degli eventi HTML.