HTML
Controlli del menu di selezione

Sintassi

• <select name=""></select>
• <datalist id=""></datalist>
• <optgroup label="Option Group"></optgroup>
• <option value="">Option</option>

Seleziona Menu

L'elemento <select> genera un menu a discesa dal quale l'utente può scegliere un'opzione.

<select name="">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

Modifica della dimensione

Puoi cambiare la dimensione del menu di selezione con l'attributo size . Una dimensione di 0 o 1 visualizza il menu standard di menu a discesa. Una dimensione maggiore di 1 convertirà il menu a discesa in una casella che visualizza molte righe, con un'opzione per riga e una barra di scorrimento per scorrere le opzioni disponibili.

<select name="" size="4"></select>

Menu di selezione multi-opzione

Per impostazione predefinita, gli utenti possono selezionare solo un'opzione. L'aggiunta dell'attributo multiple consente agli utenti di selezionare più opzioni contemporaneamente e inviare tutte le opzioni selezionate con il modulo. L'utilizzo dell'attributo multiple converte automaticamente il menu a discesa in una casella come se avesse una dimensione definita. La dimensione predefinita quando ciò si verifica è determinata dal browser specifico che si sta utilizzando e non è possibile cambiarlo in un menu a discesa mentre consente selezioni multiple.

<select name="" multiple></select>

Quando si utilizza l'attributo multiple , esiste una differenza tra l'utilizzo di 0 e 1 per la dimensione, mentre non esiste alcuna differenza quando non si utilizza l'attributo. L'uso di 0 farà sì che il browser si comporti in qualsiasi modo predefinito è programmato da fare. L'utilizzo di 1 imposterà esplicitamente la dimensione della casella risultante su una sola riga alta.

Gruppi di opzioni

Puoi raggruppare ordinatamente le opzioni all'interno di un menu di selezione per fornire un layout più strutturato in un lungo elenco di opzioni utilizzando l'elemento <optgroup> .

La sintassi è molto semplice, semplicemente usando l'elemento con un attributo label per identificare il titolo per il gruppo e contenente zero o più opzioni che dovrebbero essere all'interno di quel gruppo.

<select name="">
  <option value="milk">Milk</option>
  <optgroup label="Fruits">
    <option value="banana">Bananas</option>
    <option value="strawberry">Strawberries</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="carrot">Carrots</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>
</select>

Quando si utilizzano i gruppi di opzioni, non tutte le opzioni devono essere contenute in un gruppo. Inoltre, la disattivazione di un gruppo di opzioni disabilita tutte le opzioni all'interno del gruppo e non è possibile riattivare manualmente una singola opzione all'interno di un gruppo disabilitato.

Opzioni

Le opzioni all'interno di un menu di selezione sono ciò che l'utente selezionerà. La sintassi normale per un'opzione è la seguente:

<option>Some Option</option>

Tuttavia, è importante notare che il testo all'interno dell'elemento <option> stesso non viene sempre utilizzato e in sostanza diventa il valore predefinito per gli attributi che non sono specificati.

Gli attributi che controllano l'aspetto e la funzione effettivi dell'opzione sono value ed label . L'etichetta rappresenta il testo che verrà visualizzato nel menu a discesa (quello che stai guardando e farà clic per selezionarlo). Il valore rappresenta il testo che verrà inviato insieme all'invio del modulo. Se uno di questi valori viene omesso, utilizza il testo all'interno dell'elemento come valore. Quindi l'esempio che abbiamo dato sopra potrebbe essere "espanso" a questo:

<option label="Some Option" value="Some Option">

Notare l'omissione del testo interno e del tag finale, che non sono necessari per costruire effettivamente un'opzione all'interno del menu. Se fossero inclusi, il testo interno verrebbe ignorato perché entrambi gli attributi sono già specificati e il testo non è necessario. Tuttavia, probabilmente non vedrai molte persone scriverle in questo modo. Il modo più comune in cui è scritto è con un valore che verrà inviato al server, insieme al testo interno che alla fine diventa l'attributo label, in questo modo:

<option value="option1">Some Option</option>

Selezione di un'opzione per impostazione predefinita

Puoi anche specificare una determinata opzione da selezionare nel menu per impostazione predefinita allegando ad essa l'attributo selected . Per impostazione predefinita, se non viene specificata alcuna opzione come selezionata nel menu, la prima opzione del menu verrà selezionata durante il rendering. Se più di una opzione ha l'attributo selected allegato, l'ultima opzione presente nel menu con l'attributo sarà quella selezionata per impostazione predefinita.

<option value="option1" selected>Some option</option>

Se stai utilizzando l'attributo in un menu di selezione multi-opzione, tutte le opzioni con l'attributo saranno selezionate per impostazione predefinita e nessuna sarà selezionata se nessuna opzione ha l'attributo.

<select multiple>
  <option value="option1" selected>Some option</option>
  <option value="option2" selected>Some option</option>   
</select>

Datalist

Il tag <datalist> specifica un elenco di opzioni predefinite per un elemento <input> . Fornisce una funzionalità di "completamento automatico" sugli elementi <input> . Gli utenti vedranno un elenco a discesa di opzioni mentre scrivono.

<input list="Languages">

<datalist id="Languages">
  <option value="PHP">
  <option value="Perl">
  <option value="Python">
  <option value="Ruby">
  <option value="C+">
</datalist>

Supporto del browser