Corsi on-line

HTML5: organizzare le opzioni di una select con optgroup

Il tag optgroup potrà essere utilizzato all’interno delle select per i form in modo da organizzare gli elementi option, si tratta in sostanza di uno strumento grazie al quale categorizzare le opzioni disponibili che potrebbe rivelarsi particolarmente utile quando un menu di selezione prevede la presentazione all’utente di decine o centinaia di voci differenti.

La sintassi prevista per optgroup è particolarmente semplice, tale elemento dovrà essere utilizzato all’interno del tag select e corredato da due attributi; il primo è label, che consentirà di etichettare i vari gruppi tramite i quali suddividere le option, il secondo è disabled, con il quale impedire quando necessario la selezione delle voci presenti in un determinato gruppo o categoria di opzioni.

Un semplice esempio di utilizzo di optgroup potrebbe essere il seguente, dove le option disponibili vengono categorizzate in 3 gruppi differenti e sono tutte liberamente selezionabili:

<label for="sel-ling-pro">Seleziona una tipologia di linguaggio:</label>
<select class="ling-pro" name="list-ling-pro" id="list-ling-pro">
    <optgroup label="Linguaggi funzionali">
<option value="clojure">Clojure</option>
<option value="haskell">Haskell</option>
<option value="lisp">Lisp</option>
    </optgroup>
    <optgroup label="Linguaggi di scripting">
<option value="perl">Perl</option>
<option value="php">PHP</option>
<option value="python">Python</option>
    </optgroup>
    <optgroup label="Linguaggi esoterici">
<option value="brainfuck">Brainfuck</option>
<option value="malbolge">Malbolge</option>
<option value="whitespace">Whitespace</option>
    </optgroup>
</select>

Il risultato del codice proposto sarà il seguente, si noti come l’adozione dell’attributo label abbia permesso di separare i tre gruppi definiti attraverso altrettante etichette:

optgroup

Ora, si provi a modificare la sintassi associata alla label dell’ultimo gruppo in questo modo, utilizzando l’attributo disabled:

<label for="sel-ling-pro">Seleziona una tipologia di linguaggio:</label>
<select class="ling-pro" name="list-ling-pro" id="list-ling-pro">
....
    <optgroup disabled label="Linguaggi esoterici">
....
    </optgroup>
</select>

Come risulta evidente osservando l’output proposto dall’immagine successiva, disabled non renderà invisibile né l’etichetta né le opzioni da essa categorizzate, queste ultime però non risulteranno selezionabili. A testimonianza di ciò il colore delle voci più sfumato rispetto a quelle selezionabili.

opt2Si ricordi che i valori associati alle etichette, come per esempio “Linguaggi funzionali” o “Linguaggi di scripting” nel nostro esempio, non sono selezionabili, servono unicamente per associare un nome a ciascun gruppo.

Post correlati
I più letti del mese
Tematiche