<select>: l'elemento HTML "select"

L' elemento HTML <select> rappresenta un controllo che fornisce un menu di opzioni, le quali sono fornite tramite l'eleento <option>.

Ciascun elemento <option> deve avere un attributo value contenente il valore dei dati da inviare al server quando viene selezionata tale opzione. Se nessun attributo value è incluso, il valore predefinito è il testo contenuto all'interno dell'elemento. Puoi includere un attributo selected su un elemento <option> per renderlo selezionato per impostazione predefinita quando la pagina viene caricata per la prima volta.

L'elemento <select> ha alcuni attributi univoci che puoi usare per controllarlo, ad esempio multiple per specificare se è possibile selezionare più opzioni e size per specificare quante opzioni devono essere mostrate contemporaneamente. Accetta anche la maggior parte degli attributi di input dei moduli generali come required, disabled, autofocus, ecc.

Puoi annidare ulteriormente gli elementi <option> all'interno degli elementi <optgroup> per creare gruppi separati di opzioni all'interno del menu a discesa.

Attributi

autocomplete

Un DOMString che fornisce un suggerimento per la funzione di completamento automatico di un programma utente .

autofocus

Questo attributo booleano consente di specificare che un controllo modulo deve avere lo stato attivo per l'input quando la pagina viene caricata. Solo un elemento del modulo in un documento può avere l'attributo autofocus.

disabled

Questo attributo booleano indica che l'utente non può interagire con il controllo. Se questo attributo non è specificato, il controllo eredita la sua impostazione dall'elemento contenitore, ad esempio <fieldset>; se non è presente alcun elemento contenitore con l'attributo disabled impostato, il controllo è abilitato.

form

L'elemento <form> a cui associare il <select>( proprietario del modulo ). Il valore di questo attributo deve essere quello id di un <form> nello stesso documento. (Se questo attributo non è impostato, <select> è associato al suo elemento <form> antenato, se presente.)

Questo attributo ti consente di associare elementi <select> ad un <form> ovunque nel documento, non solo all'interno di un elemento <form>. Può anche sovrascrivere un elemento <form> antenato.

multiple

Questo attributo booleano indica che è possibile selezionare più opzioni nell'elenco. Se non è specificato, è possibile selezionare solo un'opzione alla volta. Quando multiple è specificato, la maggior parte dei browser mostrerà una casella di riepilogo a scorrimento anziché un menu a discesa a riga singola.

name

Questo attributo viene utilizzato per specificare il nome del controllo.

required

Un attributo booleano che indica che è necessario selezionare un'opzione con un valore di stringa non vuoto.

size

Se il controllo viene presentato come una casella di riepilogo a scorrimento (ad es. quando multiple è specificato), questo attributo rappresenta il numero di righe dell'elenco che dovrebbero essere visibili contemporaneamente. I browser non sono tenuti a presentare un elemento selezionato come una casella di riepilogo a scorrimento. Il valore predefinito è 0.

Note d'uso

Selezione di più azione

Su un computer desktop, esistono diversi modi per selezionare più opzioni in un elemento <select> con un multipleattributo:

Gli utenti del mouse possono tenere premuti i tasti Ctrl, Command, o Shift(a seconda di ciò che ha senso per il proprio sistema operativo) e quindi fare clic su più opzioni per selezionarli/deselezionarli.

Gli utenti della tastiera possono selezionare più elementi contigui:

• Concentrarsi sull'elemento <select> (ad esempio utilizzando Tab ).
• Selezionando un elemento nella parte superiore o inferiore dell'intervallo che si desidera selezionare utilizzando i tasti cursore Up e per spostarsi su e giù per le opzioni.Down
• Tenendo premuto il Shift tasto e quindi utilizzando i tasti cursore Up e si aumenta o diminuisce l'intervallo di voci selezionate.Down

Gli utenti della tastiera possono selezionare più elementi non contigui nei seguenti modi:

• Concentrarsi sull'elemento <select> (ad esempio utilizzando Tab ).
• Tenendo premuto il Ctrl tasto quindi utilizzando i tasti cursore Up e Down si cambia l'opzione di selezione "focalizzata", ovvero quella che verrà selezionata se si sceglie di farlo. L'opzione di selezione "focalizzata" viene evidenziata con un contorno tratteggiato, allo stesso modo di un collegamento incentrato sulla tastiera.
• Premendo Space per selezionare/deselezionare le opzioni "focalizzate".

Stilizzare con CSS

L'elemento <select> è notoriamente difficile da modellare in modo produttivo con i CSS. Puoi influire su determinati aspetti come qualsiasi elemento, ad esempio manipolando il modello box, il carattere visualizzato , ecc., e puoi utilizzare la proprietà appearance per rimuovere il sistema predefinito.

Tuttavia, queste proprietà non producono un risultato coerente tra i browser ed è difficile fare cose come allineare diversi tipi di elementi del modulo l'uno con l'altro in una colonna. La struttura interna dell'elemento <select> è complessa e difficile da controllare. Se vuoi avere il pieno controllo, dovresti considerare l'utilizzo di una libreria con buone strutture per lo stile dei widget dei moduli, o provare a lanciare il tuo menu a discesa usando elementi non semantici, JavaScript e WAI-ARIA per fornire la semantica.

Esempi

Selezione di base

L'esempio seguente crea un menu a discesa molto semplice, la cui seconda opzione è selezionata per impostazione predefinita.

<select name="choice">
  <option value="Primo">Primo valore</option>
  <option value="Secondo" selected>Secondo valore</option>
  <option value="Terzo">Terzo valore</option>
</select>