Tag HTML <select>
Il tag HTML <select> crea un elenco a discesa di opzioni <option>. Scopri attributi, etichettatura, multiple, size, required e placeholder.
Il tag HTML <select> crea un elenco a discesa di opzioni. L'utente fa clic sul controllo, l'elenco si espande e seleziona un valore (o più valori, con l'attributo multiple). È uno dei controlli di modulo fondamentali, utilizzato per tutto, dai selettori di paese ai menu di ordinamento.
Questa pagina tratta la sintassi, tutti gli attributi, l'accessibilità (etichettatura), i comportamenti di multiple / size / required, il pattern del placeholder disabilitato e le differenze tra <select> e un input con <datalist>.
Il tag <option> definisce ogni scelta e si trova all'interno del <select>. Per impostazione predefinita la prima opzione è preselezionata; aggiungi l'attributo selected a un'opzione per cambiare quella preselezionata. Usa <optgroup> per raggruppare opzioni correlate sotto un'intestazione in grassetto e non selezionabile.
Per inviare il valore scelto, assegna un name al <select> e inseriscilo all'interno di un <form> (o associalo con l'attributo form). Il valore inviato al server è il value dell'opzione selezionata.
Se devi inviare i dati al server o leggere l'elenco da uno script, il <select> deve avere un name e deve essere associato a un <form>.
Assegna sempre un'etichetta al <select>
Un <select> da solo non fornisce all'utente alcun testo che descriva cosa sta scegliendo, e gli screen reader non annunciano nulla di significativo. Abbinalo sempre a un <label>: imposta un id sul <select> e punta l'attributo for dell'etichetta su quell'id. Questo permette anche all'utente di fare clic sul testo dell'etichetta per portare il focus al controllo.
Esempio di <select> con etichetta
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="topic">Choose a topic:</label>
<select id="topic" name="topic">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
</select>
</body>
</html>Quando non è possibile avere un'etichetta visibile, usa aria-label="..." sul <select> in modo che le tecnologie assistive ne annuncino comunque lo scopo.
Sintassi
Il tag <select> viene in coppia. Il contenuto è scritto tra i tag di apertura (<select>) e di chiusura (</select>).
Esempio del tag HTML <select>:
Esempio del tag HTML <select>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="books">Books</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="php">PHP</option>
<option value="js">JavaScript</option>
</select>
</form>
</body>
</html>Esempio del tag HTML <select> con il tag <optgroup>:
Esempio del tag HTML <select> con il tag <optgroup>
<!DOCTYPE html>
<html>
<head>
<title>Window title of the page</title>
</head>
<body>
<select aria-label="Books and Snippets">
<optgroup label="Books">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Snippets">
<option value="git">Git</option>
<option value="java">Java</option>
</optgroup>
</select>
</body>
</html>In questo esempio, il tag <optgroup> viene usato per raccogliere le opzioni in gruppi.
Selezione di più opzioni
Aggiungi l'attributo boolean multiple per consentire all'utente di scegliere più di un'opzione. Il controllo viene visualizzato come una casella di riepilogo scorrevole invece di un elenco a discesa. Abbinalo con size per impostare quante righe sono visibili. Per selezionare più valori, l'utente tiene premuto Ctrl (Cmd su Mac) facendo clic, oppure tiene premuto Shift per selezionare un intervallo.
Esempio di multiple e size
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="langs">Languages you know:</label>
<select id="langs" name="langs" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="php">PHP</option>
<option value="sql">SQL</option>
</select>
</body>
</html>Quando un <select> con multiple viene inviato, ogni valore selezionato viene trasmesso con lo stesso name (ad es. langs=html&langs=js).
Aggiungere un placeholder
Un <select> ha sempre un valore, quindi non esiste un placeholder nativo. La soluzione comune è una prima opzione vuota, preselezionata, disabilitata e nascosta — mostra un testo guida, non può essere ri-selezionata e rimane nascosta quando l'elenco si apre. Combinala con required in modo che una scelta effettiva sia obbligatoria prima che il modulo venga inviato.
Esempio di opzione placeholder
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="size">Choose a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected hidden>Choose one</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
<button type="submit">Submit</button>
</form>
</body>
</html>Poiché il value del placeholder è vuoto, l'attributo required lo tratta come "nessuna selezione": inviare il modulo senza scegliere un'opzione reale attiva il messaggio di validazione del browser.
<select> vs. <datalist>
Un <select> obbliga l'utente a scegliere da un elenco fisso. Se invece vuoi un campo di testo libero che suggerisce valori che l'utente può accettare o ignorare, il compito spetta a un <datalist> collegato a un <input> di tipo testo tramite l'attributo list — non è una funzionalità di <select>. È un elemento separato con un comportamento diverso; usalo quando la digitazione con completamento automatico si adatta meglio di un elenco a discesa rigido.
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| autofocus | autofocus | Definisce che l'elenco deve ricevere il focus dopo il caricamento della pagina. |
| disabled | disabled | Indica che l'elenco è disabilitato e l'utente non può interagirvi. |
| form | form_id | Associa il <select> a un <form> tramite l'id di quel form, in modo che il controllo possa trovarsi fuori dall'elemento <form> nel markup e venga comunque inviato con esso. |
| multiple | multiple | Indica che è possibile scegliere più di un'opzione. Il metodo per selezionare più opzioni dipende dal sistema operativo: in Windows è necessario tenere premuto il tasto CTRL, su Mac il tasto CMD. |
| name | name | Definisce un nome per il menu a discesa. Può essere usato per accedere ai dati del modulo dopo l'invio o per collegare a un elemento JavaScript. |
| required | required | Indica che è obbligatoria la scelta di un'opzione. |
| size | number | Indica il numero di opzioni visibili nell'elenco a discesa. Se il valore dell'attributo "size" è maggiore di 1 e minore del numero totale di opzioni nell'elenco, il browser aggiunge automaticamente uno scroll per indicare che ci sono altre opzioni da visualizzare. |
Il tag <select> supporta gli Attributi globali e gli Attributi di evento.
Come stilizzare un tag HTML <select>
L'elemento <select> è parzialmente renderizzato dal sistema operativo, quindi resiste alla stilizzazione CSS completa e i risultati variano tra i browser. Puoi impostare in modo affidabile il font, i colori, il padding e il box model sul controllo stesso. Per sostituire la freccia nativa dell'elenco a discesa con una personalizzata, reimposta l'aspetto di sistema con appearance: none e aggiungi una freccia personalizzata (ad esempio una background-image o un wrapper con uno pseudo-elemento). L'elenco di opzioni espanso e la stilizzazione per singola opzione rimangono solo debolmente controllabili; per elenchi a discesa completamente personalizzati al pixel, gli sviluppatori di solito costruiscono un widget con elementi diversi da <select> e JavaScript.