Selezione multipla e liste

5.1 Elemento <select>

Gli elementi <select>, <option> e <optgroup> si usano per creare liste a discesa e liste con selezione multipla nei moduli HTML. Grazie a questi elementi, gli utenti possono scegliere una o più opzioni da un insieme di valori predefiniti.

L'elemento <select> si usa per creare una lista a discesa. Contiene uno o più elementi <option>, che rappresentano le opzioni selezionabili.

Esempio di utilizzo:

    
      <label for="country">Scegli un paese:</label>
      <select id="country" name="country">
        <option value="us">United States</option>
        <option value="ca">Canada</option>
        <option value="mx">Mexico</option>
      </select>
    
  

Attributi principali di <select>

Attributo name: imposta il nome dell'elemento del modulo, che sarà inviato al server insieme al valore selezionato.

    
      <select name="country"></select>
    
  

Attributo id: imposta un identificatore unico per l'elemento, che si usa per legarlo all'elemento <label>.

    
      <select id="country" name="country"></select>
    
  

Attributo multiple: permette all'utente di selezionare più opzioni contemporaneamente. Visivamente, la lista si presenterà come multilinea.

    
      <select name="fruits" id="fruits" multiple>
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
        <option value="cherry">Cherry</option>
      </select>
    
  

Attributo size: imposta il numero di righe visibili nella lista a discesa. È utile per creare liste scorrevoli.

    
      <select name="cities" size="4">
        <option value="ny">New York</option>
        <option value="la">Los Angeles</option>
        <option value="chicago">Houston</option>
      </select>
    
  

5.2 Elemento <option>

L'elemento <option> si usa all'interno di <select> per definire ciascuna opzione che l'utente può scegliere.

Esempio di utilizzo:

    
      <select name="color">
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
      </select>
    
  

Attributi principali di <option>:

Attributo value: imposta il valore che sarà inviato al server se questa opzione è selezionata.

    
      <option value="red">Red</option>
    
  

Attributo selected: definisce se questa opzione deve essere selezionata di default.

    
      <option value="green" selected>Green</option>
    
  

Attributo disabled: rende questa opzione non selezionabile.

    
      <option value="blue" disabled>Blue</option>
    
  

5.3 Elemento <optgroup>

L'elemento <optgroup> si usa per raggruppare opzioni correlate all'interno dell'elemento <select>. Consente di dividere logicamente le opzioni in categorie, rendendo la lista a discesa più organizzata e comprensibile.

Esempio di utilizzo:

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars">
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

Attributi principali di <optgroup>:

Attributo label: imposta il titolo del gruppo di opzioni.

    
      <optgroup label="German Cars"></optgroup>
    
  

Attributo disabled: rende tutte le opzioni all'interno di questo gruppo non selezionabili.

    
      <select name="car">
        <optgroup label="German Cars">
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          <option value="bmw">BMW</option>
        </optgroup>
        <optgroup label="Japanese Cars" disabled>
          <option value="toyota">Toyota</option>
          <option value="honda">Honda</option>
          <option value="nissan">Nissan</option>
        </optgroup>
      </select>
    
  

Consigli utili per l'uso di <select>, <option> e <optgroup>

1. Raggruppamento logico: usa <optgroup> per raggruppare logicamente opzioni correlate: renderà il modulo più facile da usare per gli utenti.
2. Selezione multipla: se è necessario offrire all'utente la possibilità di selezionare più opzioni, usa l'attributo multiple in <select>.
3. Accessibilità: usa gli attributi id e label per migliorare l'accessibilità degli elementi del modulo. Un uso corretto di label migliora l'interazione con il modulo per tutti gli utenti, inclusi quelli che usano tecnologie assistive.
4. Stilizzazione: usa CSS per migliorare l'aspetto delle liste a discesa e delle liste con selezione multipla. Ad esempio:

    
      select {
        width: 200px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }