HTML select: menu a discesa, selezione multipla e valori inviati

HTML <select> è un controllo del modulo per scegliere fra le opzioni definite da option. Per impostazione predefinita consente una sola scelta; multiple ne permette diverse. L’attributo name di select identifica il campo inviato, mentre l’attributo value dell’option selezionato ne determina il valore.

Distingui tra nomi dei campi, etichette visibili e valori inviati

Fai corrispondere l’attributo for dell’elemento label all’attributo id dell’elemento select per associare una descrizione al controllo. id identifica l’elemento nel documento, mentre name diventa la chiave dei dati inviati. Il testo visibile può differire da value: scegliere Sviluppo web può inviare web. Se ometti value, il testo dell’opzione viene usato come valore.

In un normale controllo a selezione singola, omettere selected generalmente rende la prima opzione disponibile la selezione iniziale. Per richiedere una scelta esplicita, assegna alla prima opzione uno value vuoto e aggiungi required, come indicato di seguito. Un'istruzione visibile non soddisfa la selezione richiesta quando il suo valore è vuoto.

Esempio completo: selezioni obbligatorie e multiple

Salva il codice come select-demo.html e aprilo in un browser. JavaScript impedisce l'invio e mostra i dati del modulo correnti nella pagina. Questo esercizio non invia dati a un server reale o a un sito esterno.

<!doctype html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Controllare i valori di select</title>
  <style>
    body { max-width: 36rem; margin: 1rem auto; padding: 0 1rem; }
    label, select { display: block; margin-bottom: 0.5rem; }
    select, button { font: inherit; max-width: 100%; }
    pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
</head>
<body>
  <h1>Controllare i valori selezionati</h1>
  <form id="demo">
    <label for="topic">Argomento di interesse (obbligatorio)</label>
    <select id="topic" name="topic" required>
      <option value="" selected>Scegli un argomento</option>
      <optgroup label="Sviluppo">
        <option value="web">Sviluppo web</option>
        <option value="data">Elaborazione dei dati</option>
      </optgroup>
    </select>
    <label for="skills">Tecnologie da imparare (selezione multipla consentita)</label>
    <select id="skills" name="skills" multiple size="3">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="javascript">JavaScript</option>
    </select>
    <label for="locked">Campo disabilitato</label>
    <select id="locked" name="locked" disabled>
      <option value="sample">Non modificabile</option>
    </select>
    <button type="submit">Mostra valori</button>
    <button type="reset">Reimposta</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      const data = new FormData(form);
      result.textContent = JSON.stringify(Array.from(data.entries()), null, 2);
    });
    form.addEventListener('reset', () => { result.textContent = ''; });
  </script>
</body>
</html>

1. Premi Mostra valori senza scegliere un argomento. La validazione dei campi obbligatori del browser impedisce l'invio.
2. Scegli Sviluppo web e premi Mostra valori. L'output contiene topic con web, e due voci skills con html e css. Il campo locked disabilitato è escluso.
3. Cambia la selezione delle competenze e controlla di nuovo. Ogni opzione selezionata produce un'altra voce chiamata skills. Se deselezioni ogni opzione, potrebbe non esserci alcuna voce skills.
4. Premi Reimposta. L'argomento torna all'opzione istruzione vuota, le abilità tornano a HTML e CSS e l'output viene cancellato.

multiple e size sono attributi diversi

multiple consente valori multipli, mentre size specifica il numero di righe visibili. L'aumento di size non abilita automaticamente la selezione multipla. Le combinazioni da tastiera dipendono dal sistema operativo. I controlli desktop possono supportare Ctrl o Command con un clic, o Shift per la selezione di un intervallo; i dispositivi mobili possono fornire uno schermo di selezione separato.

Quando si leggono più selezioni in JavaScript, select.value restituisce solo il primo valore selezionato. Itera su selectedOptions oppure chiama getAll('skills') su un’istanza di FormData, ad esempio new FormData(form).getAll('skills'), per ottenere ogni valore. Sul server, segui le regole di parsing del tuo framework per i campi ripetuti con lo stesso nome.

Usa con attenzione disabled, required e selected

disabled impedisce l’interazione ed esclude il campo dai dati inviati. Un select non ha un equivalente nativo dell’attributo readonly di un elemento input, quindi aggiungere readonly non lo blocca. Disabilitare un controllo nel browser non sostituisce nemmeno i controlli di autorizzazione sul server.

required, disabled, multiple e selected sono attributi booleani. Anche selected="false" lascia l'attributo presente, quindi l'opzione può ancora essere trattata come inizialmente selezionata. Rimuovi l’attributo o imposta la proprietà JavaScript corrispondente su false per renderla falsa. Un reset ripristina le selezioni iniziali dichiarate nell'HTML; non necessariamente cancella ogni selezione.

autofocus può mettere a fuoco il controllo automaticamente, ma usalo solo quando necessario, considerando la posizione del lettore e il comportamento della tastiera mobile. I controlli nativi e i popup variano a seconda del browser e del sistema operativo, quindi mantenere le associazioni label e l'interazione standard con la tastiera è utile per i moduli ordinari. La MDN per select e la MDN per option spiegano le regole dettagliate.