0Pricing
HTML Academy · Lezione

Menu a discesa select e option

Creare menu a discesa per la selezione con select e option

Menu a discesa select e option è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

L'elemento select

L'elemento <select> crea un menu a discesa:

<label for="country">Country</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="de">Germany</option>
</select>

value dell'opzione rispetto al testo

Ogni <option> ha un value (inviato al server) e un testo visualizzato:

<select name="color">
  <option value="">-- Select a color --</option>  <!-- placeholder -->
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</select>
<!-- value="#ff0000" is submitted; "Red" is displayed -->

Attributo selected

Preselezionare un'opzione con l'attributo selected:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Pro (Recommended)</option>
  <option value="enterprise">Enterprise</option>
</select>

optgroup per opzioni suddivise in categorie

Raggruppare le opzioni correlate con <optgroup>:

<select name="language">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

Attributo multiple

Consentire la selezione di più opzioni con l'attributo multiple:

<label for="skills">Select your skills (Ctrl+Click for multiple)</label>
<select id="skills" name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>
<!-- size controls how many options are visible -->
<!-- Submitted as multiple values: skills=html&skills=css -->

Attributo size

L'attributo size controlla il numero di opzioni visibili:

<!-- size=1 (default): dropdown -->
<select size="1">...</select>

<!-- size>1: list box -->
<select size="4">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>Python</option>
</select>

Opzioni e gruppi disabled

Disabilitare singole opzioni o interi gruppi:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (Contact Sales)</option>
</select>

<select>
  <optgroup label="Legacy (deprecated)" disabled>
    <option value="v1">Version 1</option>
  </optgroup>
</select>

Stile di select

Le possibilità di applicare stili al <select> nativo sono limitate — ecco che cosa funziona:

select {
  appearance: none;   /* remove native dropdown arrow */
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

Menu a discesa personalizzati rispetto a select nativo

Compromessi da valutare quando si prende in considerazione un componente per menu a discesa personalizzato:

  • Select nativo — accessibile per impostazione predefinita, adatto ai dispositivi mobili e funzionante senza JavaScript
  • Menu a discesa personalizzato — controllo completo dello stile, ma richiede un'implementazione completa di ARIA e la gestione della tastiera

Per la maggior parte dei casi d'uso, preferire <select> nativo.

Lettura del valore selezionato in JavaScript

Ottenere o impostare il valore selezionato con JavaScript:

const select = document.getElementById('country');

// Get selected value:
console.log(select.value);  // e.g. 'us'

// Get selected option text:
console.log(select.options[select.selectedIndex].text);

// Set selected value:
select.value = 'de';

// Listen for changes:
select.addEventListener('change', () => {
  console.log('Selected:', select.value);
});

Schema dell'opzione segnaposto

Creare un'opzione segnaposto non selezionabile:

<select name="role" required>
  <option value="" disabled selected>-- Select your role --</option>
  <option value="dev">Developer</option>
  <option value="designer">Designer</option>
  <option value="pm">Product Manager</option>
</select>
<!-- disabled + selected: shows as placeholder
     value="" + required: fails validation if not changed -->

Verifica rapida

Quale elemento raggruppa le opzioni correlate all'interno di un menu a discesa select?

Riepilogo: select e option

Elementi essenziali dei menu a discesa:

  • <select> + <option> — menu a discesa
  • value su option — ciò che viene inviato al server
  • selected — preseleziona un'opzione
  • <optgroup label> — raggruppa le opzioni correlate
  • multiple — consente selezioni multiple
  • size — mostra N opzioni senza menu a discesa

Domande Frequenti

La lezione «Menu a discesa select e option» è gratuita?

Sì — il testo completo di «Menu a discesa select e option» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Menu a discesa select e option»?

Creare menu a discesa per la selezione con select e option Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «Menu a discesa select e option»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Menu a discesa select e option
  2. Textarea per l’input su più righe
  3. Gruppi di caselle di controllo e pulsanti di opzione
  4. Datalist per il completamento automatico
← Torna a HTML Academy