Fabio Donatantonio

Resta connesso

Software Developer / Adjunct Professor

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 name='form' action='pagin.php' method='GET'>
	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>

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.

Select Html

Attributi di una select

E’ possibile, tramite l’attributo size, specificare quanti elementi del menu visualizzare.
In altre parole il numero di righe che la select deve occupare all’interno della pagina html.
Scrivere ad esempio:

<select name='frutto' size=‘3’>
...
</select>

fa si che il menu visto in precedenza mostri inizialmente le prime tre voci, quindi poi tramite lo scroll laterale sarà possibile visualizzarne i successivi.

Select Html - Attributo size

Tramite l’attributo selected, applicato ad uno degli option della select, si può definire a priori una scelta del menu come predefinita. In assenza di tale attributo, la select seleziona di default (lato html) la prima voce in menu.
Per impostare una voce in menu come scelta di default è necessario scrivere:

<option value='B' selected=‘selected’>Pera</option>

Nonostante la select nasca per effettuare una singola scelta tra un numero di voci in elenco, è possibile permettere all’utente di selezionare più opzioni.
Utilizzando l’attributo multiple all’interno del tag select è possibile forzare una select ad accettare più di una voce da parte dell’utente. Di conseguenza ciò influisce anche sull’aspetto grafico di una select e sul modo in cui è possibile interagire con essa.
Vediamo il seguente codice html:

<form name='form' action='pagin.php' method='GET'>
	Scegli i tuoi frutti preferiti:
	<select name='frutto' multiple='multiple'>
		<option value='A'>Mela</option>
		<option value='B'>Pera</option>
		<option value='C'>Banana</option>
		<option value='D'>Arancia</option>
		 <option value='E'>Uva</option>
	</select>
	<input type='submit' value='Conferma'>
</form>

All’interno del tag select troviamo l’attributo multiple=‘multiple’, di seguito le singole voci che compongono il menu.
L’utente per selezionare più voci dovrà tenere premuto il tasto ctrl e cliccare con il tasto sinistro del mouse sulle singole etichette per aggiungerle alla selezione.
Questo tipo di select sarà così visualizzata all’interno del browser:

Select Html - Attributo multiple

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, segue un esempio:

<form name='form' action='pagin.php' method='GET'>
	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“. Il funzionamento della select non muta e gli attributi precedentemente visti sono combinabili tra loro anche in una select con raggruppamento.

Select Html - Tag optgroup

Fabio Donatantonio

Fabio Donatantonio. Analista e sviluppatore full-stack di applicazioni web in linguaggio PHP. Professore a Contratto per le cattedre di Fondamenti di Informatica e Archivistica Digitale presso Università degli Studi eCampus. Dal 2008 curatore del sito www.donatantonio.net, da sempre appassionato di programmazione, mare, sigari e... musica.

Ti potrebbe piacere anche

Leave a reply

Your email address will not be published. Required fields are marked *

 

Didattica

Università degli Studi eCampus
Data Evento
05/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Novedrate(CO)
05/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Novedrate(CO)
12/07/2019
11:30
Esame Introduzione all'Archivistica Digitale e all'Informatica per le Scienze Umane - Cds Letteratura, Arte, Musica e Spettacolo - Lettere - Roma
12/07/2019
11:30
Esame Archivistica Digitale e Informatica per le Scienze Umane - Cds Filologia Moderna - Lettere - Roma
12/07/2019
11:30
Esame Abilità Informatiche e Telematiche - Cds Design e Discipline della Moda - Lettere - Roma
Risorse
Guida HTML/CSS per principianti (link)
Introduzione agli ipertesti (link)
Esercizi guidati in Java (link)
Intelligenza artificiale (link)
Libri
Fondamenti di Informatica (2011) (link)
Informatica per le Scienze Umane (2011) (link)
Fondamenti di Informatica (2014) (link)
Pagina Docente
uniecampus.it - Scheda Docente (link)
Contatti
fabio.donatantonio[at]uniecampus.it

JWhisper, sviluppato presso il Dipartimento di Informatica Applicata dell'Università degli Studi di Salerno:

Stay Connected

Twitter

Le mie foto

Foto di Fabio Donatantonio
×