Guida HTML interattiva: Menu a tendina (select)

Q: Come si crea un menu a tendina in HTML?

Usa con un per ogni scelta: Red Blue . Dai alla select un name e un .

Q: Come imposto l'opzione predefinita in una select?

Aggiungi selected a quell'opzione: Blue . Senza, è selezionata la prima opzione. In JavaScript, imposta select.value = 'blue'.

Q: Come aggiungo un segnaposto a una select?

Rendi la prima opzione vuota e non selezionabile: Choose a country . Aggiungi required alla così il modulo non si può inviare finché non viene scelta un'opzione vera.

Q: Come leggo il valore selezionato di una select in JavaScript?

select.value è il valore dell'opzione selezionata. Per il suo testo visibile usa select.selectedOptions[0].text, e ascolta l'evento change per reagire quando la scelta cambia. Per una select multipla, scorri select.selectedOptions con map.

Q: Che differenza c'è tra una select e una datalist?

Una permette solo le opzioni elencate. Un con una suggerisce opzioni mentre il lettore scrive, ma accetta qualsiasi testo. Usa la select quando la risposta deve essere una delle tue.

Un menu a tendina è un elemento <select> con un <option> per ogni scelta. Il value di ogni opzione è ciò che invia il modulo; il testo tra i tag è ciò che vede il lettore. Scegline una e premi Submit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select</title>
</head>
<body>
  <form>
    <label for="lang">Course language</label>
    <select id="lang" name="language">
      <option value="py">Python</option>
      <option value="js" selected>JavaScript</option>
      <option value="java">Java</option>
      <option value="cpp">C++</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Il modulo invia language=js: il name della select e il value dell'opzione scelta. selected imposta il valore predefinito; senza, viene scelta la prima opzione. Se un'opzione non ha value, viene inviato il suo testo.

Collega l'etichetta alla select con for e id (o racchiudendola) così cliccando l'etichetta il focus va sul menu e gli screen reader lo annunciano.

Attributi di select e option

Elemento	Attributo	Cosa fa
`<select>`	`name`	La chiave con cui viene inviato il valore
`<select>`	`required`	Bisogna scegliere un'opzione vera, non una prima opzione segnaposto vuota
`<select>`	`multiple`	Si possono scegliere più opzioni
`<select>`	`size`	Quante righe sono visibili (la trasforma in una casella di riepilogo)
`<select>`	`disabled`	L'intero menu è disattivato e non viene inviato
`<option>`	`value`	Ciò che viene inviato quando è scelta
`<option>`	`selected`	Scelta al caricamento della pagina
`<option>`	`disabled`	Mostrata ma non selezionabile
`<optgroup>`	`label`	Il titolo del gruppo

Un'opzione segnaposto con required

Una select ha sempre un valore, quindi senza un segnaposto viene inviata la prima opzione vera anche se il lettore non ha mai toccato il menu. Una prima opzione vuota risolve il problema, e required blocca l'invio finché non viene scelta un'opzione vera:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Placeholder</title>
</head>
<body>
  <form>
    <label>Country
      <select name="country" required>
        <option value="" disabled selected>Choose a country</option>
        <option value="br">Brazil</option>
        <option value="de">Germany</option>
        <option value="jp">Japan</option>
      </select>
    </label>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Premi Continue prima di scegliere: il browser rifiuta e ti chiede di selezionare un elemento. Il segnaposto ha value="", che required considera vuoto, e disabled così non si può scegliere di nuovo una volta selezionato un paese.

Raggruppare le opzioni con optgroup

<optgroup label="..."> mette un titolo sopra un insieme di opzioni. Il titolo non è selezionabile:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>optgroup</title>
</head>
<body>
  <form>
    <label>Car
      <select name="car">
        <optgroup label="Electric">
          <option value="model3">Model 3</option>
          <option value="ioniq">Ioniq 5</option>
        </optgroup>
        <optgroup label="Hybrid">
          <option value="prius">Prius</option>
          <option value="corolla">Corolla Hybrid</option>
        </optgroup>
      </select>
    </label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

I gruppi non si possono annidare: una lista ha un solo livello di titoli, non di più. disabled su un <optgroup> disattiva tutte le sue opzioni.

Selezione multipla

multiple permette al lettore di scegliere più opzioni, e trasforma il menu a tendina in una casella di riepilogo. Tieni premuto Ctrl (Cmd su Mac) per aggiungere le opzioni una alla volta, o Maiusc per selezionare un intervallo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple select</title>
</head>
<body>
  <form>
    <label for="skills">Skills</label><br>
    <select id="skills" name="skills" multiple size="5">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="js">JavaScript</option>
      <option value="sql">SQL</option>
      <option value="git">Git</option>
    </select>
    <p><button type="submit">Submit</button></p>
  </form>
</body>
</html>

Il modulo invia skills=html e skills=css: lo stesso nome una volta per ogni opzione scelta. Molte persone non conoscono il gesto Ctrl+clic, quindi per poche opzioni un gruppo di checkbox è più facile da usare.

Leggere e impostare il valore in JavaScript

select.value legge e imposta il valore dell'opzione scelta, e l'evento change scatta quando il lettore sceglie un'opzione diversa. Un uso comune è un secondo menu le cui opzioni dipendono dal primo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dependent dropdowns</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Country
      <select name="country" id="country">
        <option value="fr">France</option>
        <option value="it">Italy</option>
      </select>
    </label>
    <label>City <select name="city" id="city"></select></label>
    <button type="submit">Submit</button>
  </form>
  <p id="out"></p>

  <script>
    const cities = { fr: ['Paris', 'Lyon', 'Nice'], it: ['Rome', 'Milan'] };
    const country = document.querySelector('#country');
    const city = document.querySelector('#city');

    const fill = () => {
      city.replaceChildren(...cities[country.value].map((name) => new Option(name, name.toLowerCase())));
    };
    const show = () => {
      document.querySelector('#out').textContent =
        'value: ' + city.value + ', text: ' + city.selectedOptions[0].text;
    };

    country.addEventListener('change', () => { fill(); show(); });
    city.addEventListener('change', show);
    fill();
    show();
  </script>
</body>
</html>

new Option(text, value) crea un'opzione. select.selectedIndex è la posizione dell'opzione scelta, e select.selectedOptions elenca quelle scelte, ed è così che si legge una select multipla.

Dare uno stile a una select

La lista aperta del menu è disegnata dal browser e dal sistema operativo, e se ne può personalizzare poco. Il riquadro chiuso invece sì: appearance: none toglie la freccia nativa, e un'immagine di sfondo ci mette la tua:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled select</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .styled {
      appearance: none;
      font: inherit;
      padding: 8px 36px 8px 12px;
      border: 2px solid #9ca3af;
      border-radius: 8px;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      color: #111827;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  </style>
</head>
<body>
  <label>Default <select><option>Option one</option><option>Option two</option></select></label>
  <br><br>
  <label>Styled
    <select class="styled">
      <option>Option one</option>
      <option>Option two</option>
    </select>
  </label>
</body>
</html>

Il padding extra alla fine lascia spazio alla freccia così il testo lungo delle opzioni non ci finisce sotto. font: inherit conta qui quanto sui pulsanti: per impostazione predefinita le select usano il piccolo font dei moduli del browser. Le opzioni nella lista aperta mantengono l'aspetto nativo. Chrome permette di dare uno stile anche alla lista aperta se lo attivi con appearance: base-select; i browser che non lo supportano mostrano la lista nativa. Il controllo completo ovunque richiede un widget personalizzato costruito con ARIA, che è molto più difficile da fare bene di quanto sembri.

select, radio button o datalist?

Usa	Quando
`<select>`	Una scelta da una lista lunga, o quando lo spazio è poco
Radio button	Una scelta tra poche opzioni che devono essere tutte visibili (vedi radio button HTML)
`<input>` con `<datalist>`	Suggerimenti, ma è ammesso qualsiasi valore digitato

Errori comuni

Nessun segnaposto in una scelta obbligatoria. Viene inviata la prima opzione vera anche se il lettore non l'ha mai scelta.
Un segnaposto con un valore vero, come value="none". required lo considera una scelta valida. Usa value="".
Opzioni senza value quando il testo è lungo o tradotto. Il server riceve il testo visibile, che cambia con la lingua.
multiple per poche opzioni. Le checkbox sono più facili da usare.
Ascoltare click sulle opzioni. Usa change sulla <select>; scatta anche per i cambiamenti da tastiera.
Nessuna etichetta. Una select con solo un segnaposto resta senza nome una volta scelta un'opzione.

Domande frequenti

Come si crea un menu a tendina in HTML?

Usa <select> con un <option> per ogni scelta: <select name="color"><option value="red">Red</option><option value="blue">Blue</option></select>. Dai alla select un name e un <label>.

Come imposto l'opzione predefinita in una select?

Aggiungi selected a quell'opzione: <option value="blue" selected>Blue</option>. Senza, è selezionata la prima opzione. In JavaScript, imposta select.value = 'blue'.

Come aggiungo un segnaposto a una select?

Rendi la prima opzione vuota e non selezionabile: <option value="" disabled selected>Choose a country</option>. Aggiungi required alla <select> così il modulo non si può inviare finché non viene scelta un'opzione vera.

Come leggo il valore selezionato di una select in JavaScript?

select.value è il valore dell'opzione selezionata. Per il suo testo visibile usa select.selectedOptions[0].text, e ascolta l'evento change per reagire quando la scelta cambia. Per una select multipla, scorri select.selectedOptions con map.

Che differenza c'è tra una select e una datalist?

Una <select> permette solo le opzioni elencate. Un <input> con una <datalist> suggerisce opzioni mentre il lettore scrive, ma accetta qualsiasi testo. Usa la select quando la risposta deve essere una delle tue.

Concetti correlati