Guide

Corso HTML – Lezione 14: Select, optgroup ed option elements

option elements

option elements

Con l’uso degli option elements, <select> e <option>, possiamo creare dei menu e, in caso di lista grandi, possiamo raggrupparle logicamente con l’uso di <optgroup>.

Gli option elements vengono utilizzati in modo concatenato per poter creare menù “a tendina”. L’elemento <select> crea un menù. Ogni scelta offerta dal menù è rappresentata da un elemento <option>…</option>.  Un elemento select deve contenere almeno un elemento di opzione, all’interno è possibile inserire anche elementi <optgrop>, questi consentono un raggruppamentologico delle scelte. Il raggruppamento logico si rivela molto utile in presenza di liste molto lunghe, piccoli sottogruppi sono più facili di ricordare rispetto ad una grande lista unita.


Elenchiamo gli attributi principali per le <select>

Attributo Value Descrizione
 disabled  disabled  Specifica che un menù a tendina dovrebbe essere disabilitato.
 multiple  multiple  Specifica che le opzioni multiple possono essere utilizzate.
 name  name  Specifica il nome del menù a discesa
 size  number  Specifica il numero di opzioni visibili nel menù

Possiamo impostare una preselezione verso un particolare option elements, se nessuno di questi elementi ha l’attributo selected, il comportamento per la scelta di quale <option> è inizialmente selezionata non è definito. Diversamente se l’attributo in questione è stato inserito, l’ <option>sarà preselezionata.
Usando l’attributo multiple impostato in <select> possiamo impostare più preselezioni. Se non viene utilizzato l’attributo per le preselezioni multiple, l’inserimento di più selected verrebbe considerato errore.

Attributi <optgroup>

Attributo Value Descrizione
  label  text  Specifica una descrizione per un gruppo di options

Attributi <option>

Attributo Value Descrizione
 disabled  disabled  Specifica che un option dovrebbe essere disabilitato
 label  text  Specifica una etichetta per la option
 selected  selected  Specifica se l’opzione deve essere selezionata di default
 value  text  Specifica il valore che viene inviato al server

 

Durante il rendering di una scelta di menu, i programmi utente dovrebbero usare il valore dell’attributo label dell’elemento opzione come scelta.

  • Se questo attributo non è specificato, gli interpreti dovrebbero utilizzare i contenuti dell’ option elements.
  • L’attributo label dell’elemento optgroup specifica l’etichetta per un gruppo di scelte.
  • Solo le opzioni selezionate avranno successo (utilizzando il nome di controllo “component-select” nel seguente esempio).
  • Se nessuna opzione è selezionata, il controllo non ha successo e né il nome né alcun valore sono sottoposti al server quando il modulo viene inviato.
<form action="pagina.php" method="post">
<p><select name="Ordinazione">
<option selected label="none" value="none">Nessuna</option>
<optgroup label="Primi piatti">
<option disabled label="pasta" value="p_carb">Pasta alla carbonara</option>
<option label="riso" value="r_fun">Risotto ai funghi porcini</option>
<option label="zuppa" value="z_pis">Zuppa di piselli</option>
</optgroup>

<optgroup label="Secondi piatti">
<option label="pesce" value="br_pzz">Branzino all'acqua pazza</option>
<option label="carne" value="crp_cvl"> Carpaccio di cavallo</option>
</optgroup>
<optgroup label="Dessert">
<option label="soufflé" value="sff_drk"> Soufflé con cioccolato extra dark</option>
<option label="torta" value="trt_frg"> Torta di fragole con panna</option>
</optgroup>
</select></p>
</form>
Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Le guide più interessanti