Che cos’è una casella di riepilogo HTML?

In HyperText Markup Language (HTML), una casella di riepilogo è un tipo di componente dell’interfaccia utente grafica interattiva (GUI). Appare su un sito web come una casella all’interno della pagina che contiene un insieme verticale di opzioni di testo che possono essere selezionate dall’utente. Lo scopo dell’utilizzo di una casella di riepilogo HTML è presentare a un utente una serie di opzioni da cui è possibile selezionare e quindi reagire alla selezione. Ci sono molte opzioni disponibili per personalizzare una casella di riepilogo, specialmente attraverso l’uso di fogli di stile a cascata (CSS). C’è una differenza visiva e funzionale tra una casella di riepilogo HTML e un altro elemento della GUI noto come casella combinata, anche se sono definiti più o meno allo stesso modo.

In un documento, viene definita una casella di riepilogo HTML utilizzando il tag select. Questo tag avvia la casella di riepilogo e può essere utilizzato per definire diverse opzioni. Una delle proprietà più importanti del tag select è il nome della casella di riepilogo, che dà ad altre parti del documento HTML la possibilità di accedere direttamente ai valori della casella di riepilogo. Un’altra opzione importante che può essere impostata è la proprietà multipla, che può consentire a un utente di selezionare più elementi dall’elenco contemporaneamente anziché uno solo alla volta.

Tra i tag select di apertura e chiusura, gli elementi effettivi da contenere in una casella di riepilogo HTML vengono definiti utilizzando il tag option. Il tag opzione racchiude il testo effettivo che verrà visualizzato nella casella di riepilogo HTML. Come il tag select, ha anche alcune proprietà importanti. Una proprietà preziosa del tag option è la capacità di definire un valore restituito per un’opzione selezionata che viene inviata a uno script di query invece del testo che l’utente vede. Ciò significa che un utente può vedere la parola “rosso”, ma la casella di riepilogo HTML può restituire il valore esadecimale di rosso invece della parola effettiva.

Oltre alle opzioni, una casella di riepilogo HTML può contenere un altro elemento visivo noto come optgroup. Un optgroup è un’intestazione utilizzata per separare visivamente le diverse opzioni all’interno di una casella di riepilogo. Quando un utente guarda una casella di riepilogo che contiene tag optgroup, vedrà un’intestazione in grassetto nella casella, sotto la quale le opzioni associate saranno leggermente rientrate e non in grassetto.

Anche se una casella di riepilogo HTML funzionale può essere creata e posizionata su un sito Web, in realtà non farà nulla quando un utente seleziona un’opzione a meno che non sia presente il codice di supporto per farlo. Questo può essere fatto con JavaScript® accedendo alla casella di riepilogo tramite il modello a oggetti del documento (DOM), oppure può essere eseguito con altri script o applet. Come elemento interattivo, una casella di riepilogo genera eventi utente come il passaggio del mouse, che possono essere catturati all’interno del browser.