Html: le select
Spesso sarà capitato di compilare dei moduli html e trovarsi d’innanzi una serie di possibili scelte da un menu a tendina.
Per realizzare un menu di scelta è necessario il tag <select> che conterrà a sua volta ogni singola voce che compone il menu <option>. La sintassi quindi è la seguente:
<select name='…'> <option value='…'> … </option> <option value='…'>…</option> … </select>
Come per gli altri campi di un form, anche la select necessita di un name per essere poi gestita correttamente dai linguaggi di programmazione.
All’interno della select sono presenti le varie opzioni che compariranno nel menu, e per ognuna di esse è necessario impostare un valore (value). Nel momento in cui l’utente seleziona una voce dal menu, il valore ad esso associato sarà passato al programma lato server.
Vediamo quindi un esempio completo:
<form method="POST" action="mailto:risatascalciante@gmail.com" enctype="text/plain"> Scegli il tuo frutto preferito: <select name='frutto'> <option value='A'>Mela</option> <option value='B'>Pera</option> <option value='C'>Banana</option> <option value='D'>Arancia</option> </select> <input type='submit' value='Conferma'> </form>
Che produce la seguente select:
Nel codice html proposto abbiamo definito una select con name ‘frutto’. All’interno quattro possibili scelte, ognuna contenente come testo il nome di un frutto e come valore una lettera dell’alfabeto.
In alternativa avremmo potuto scegliere come valore per ogni singola voce, un numero, oppure una stringa o semplicemente l’etichetta stessa della voce nel menu.
Raggruppamento di scelte
Siccome spesso i menu di scelta tendono a diventare particolarmente lunghi, dalla versione 4 dell’HTML si è introdotto il tag optgroup che consente di suddividere le varie possibilità di scelta in gruppi tramite l’utilizzo di apposite etichette (label).
La sintassi è molto semplice:
<optgroup label=“Testo etichetta gruppo">
All’interno del contenitore optgroup vanno elencate le option che formano il gruppo e a sua volta ogni gruppo sarà elencato nella select. Per comprenderne a pieno l’utilizzo, vedere il seguente esempio:
<form method="POST" action="mailto:risatascalciante@gmail.com" enctype="text/plain"> Scegli il tuo frutto preferito: <select name='frutto'> <optgroup label='Frutti classici'> <option value='A'>Mela</option> <option value='B'>Pera</option> <option value='C'>Banana</option> </optgroup> <optgroup label='Frutti di stagione'> <option value='D'>Arancia</option> <option value='E'>Uva</option> <option value='F'>Fragola</option> </optgroup> </select> </form>
Il browser visualizzerà la select suddivisa in due gruppi, il primo con etichetta “Frutti classici” e il secondo con etichetta “Frutti di stagione“. Quindi la select sarà la seguente: