Tag HTML <select>
Definizione e uso
<select>
L'elemento viene utilizzato per creare un elenco a discesa.
<select>
L'elemento viene utilizzato più spesso nei moduli per raccogliere l'input dell'utente.
Dopo la presentazione del modulo, è necessario utilizzare l'attributo name per fare riferimento ai dati del modulo (se l'attributo name viene omesso, i dati dell'elenco a discesa non verranno presentati).
<select>
All'interno dell'elemento Tag <option> Definire le opzioni disponibili nell'elenco a discesa.
È necessario utilizzare l'attributo id per associare l'elenco a discesa al tag (label).
Suggerimento:Aggiungi sempre Tag <label> Per ottenere le migliori pratiche di accessibilità!
Vedere anche:
Manuale di riferimento HTML DOM:Oggetto Select
Corso CSS:Impostare lo stile del modulo
Esempio
Esempio 1
Creare un elenco a discesa contenente quattro opzioni:
<label for="cars">Seleziona un marchio di auto:</label> <select name="cars" id="cars"> <option value="audi">Audi</option> <option value="byd">BYD</option> <option value="geely">Geely</option> <option value="volvo">Volvo</option> </select>
Esempio 2
Esempio 2 <select>
Utilizzato insieme al tag <optgroup>:
<label for="cars">Seleziona un marchio di auto:</label> <select name="cars" id="cars"> <optgroup label="Automobili cinesi"> <option value="byd">BYD</option> <option value="geely">Geely</option> </optgroup> <optgroup label="Automobili tedesche"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select>
Proprietà
Proprietà | Valore | Descrizione |
---|---|---|
autofocus | autofocus | La regola stabilisce che l'elenco a discesa deve ottenere automaticamente il focus durante il caricamento della pagina. |
disabled | disabled | La regola stabilisce che l'elenco a discesa deve essere disabilitato. |
form | id del modulo | Definire il modulo di appartenenza dell'elenco a discesa. |
multiple | multiple | La regola permette di selezionare più opzioni in una volta. |
name | Nome | Definisce il nome della lista a discesa. |
required | required | Specifica che l'utente deve selezionare un valore prima di inviare il modulo. |
size | Numero | Definisce il numero di opzioni visibili nella lista a discesa. |
Proprietà globali
<select>
Il tag supporta anche Proprietà globali in HTML.
Proprietà evento
<select>
Il tag supporta anche Proprietà evento in HTML.
Impostazioni CSS predefinite
Nessuno.
Supporto del browser
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Supporto | Supporto | Supporto | Supporto | Supporto |