Tag HTML <option>
Il tag <option> definisce gli elementi di un elenco a discesa. Descrizione, attributi ed esempi d'uso.
Il tag <option> definisce un singolo elemento all'interno di un elenco a discesa creato con il tag <select>, oppure un suggerimento di completamento automatico all'interno di un <datalist>. Può comparire come figlio di <select>, <datalist> o di un <optgroup>, che raggruppa le opzioni correlate.
Ogni <option> contiene due informazioni distinte: il testo visualizzato dall'utente e il valore inviato al momento della sottomissione. Comprendere la differenza tra i due è fondamentale per usare questo tag correttamente, e questo aspetto viene trattato in dettaglio qui di seguito.
Sintassi
Il tag <option> può essere scritto come coppia di tag o come tag auto-chiudente. Quando si usa come coppia, il testo visualizzato viene scritto tra il tag di apertura (<option>) e quello di chiusura (</option>).
Il tag <option> viene generalmente utilizzato con l'attributo value per specificare quale valore deve essere inviato al server per l'elaborazione successiva.
Esempio del tag HTML <option>:
Un elenco a discesa con il tag HTML <option>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<select>
<option value="computers">Computer</option>
<option value="notebook">Notebook</option>
<option value="tablet">Tablet</option>
</select>
</form>
</body>
</html>Il <select> è racchiuso in un <form> perché il menu a discesa è destinato ad essere inviato a un server. Un <select> funziona correttamente anche senza un form per scripting puramente lato client, ma è necessario un form (o JavaScript) per inviare effettivamente il valore scelto da qualche parte.
L'attributo value e la sua insidia
L'attributo value contiene i dati inviati quando l'opzione viene selezionata. Il testo tra i tag è solo ciò che l'utente vede — non deve necessariamente corrispondere al valore.
Se si omette value, il browser invia il contenuto testuale dell'opzione. Queste due opzioni si comportano in modo identico al momento dell'invio:
<!-- value omitted: the text "Tablet" is submitted -->
<option>Tablet</option>
<!-- value present: "tablet" is submitted, "Tablet" is shown -->
<option value="tablet">Tablet</option>Questo è comodo, ma è anche una fonte comune di bug: se in seguito si modifica il testo visibile (per traduzione, capitalizzazione o formulazione) di un'opzione priva di value, cambiano anche i dati ricevuti dal server. Per invii prevedibili e stabili, impostare sempre un value esplicito.
Esempio del tag HTML <option> con il tag <datalist>.
Elenco di aeroporti di partenza con il tag option
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Departure airport:</p>
<form action="action_form.php" method="get">
<input type="text" list="airports" name="airports" />
<datalist id="airports">
<option>Birmingham</option>
<option>Cambridge</option>
<option>Oxford</option>
<option>Bangor</option>
</datalist>
<input type="submit" value="confirm" />
</form>
</body>
</html>In questo esempio, i tag <option> sono inseriti all'interno del tag <datalist> senza l'attributo value, poiché il contenuto testuale funge da suggerimento di completamento automatico.
Attributi
| Attributo | Valore | Descrizione |
|---|---|---|
| disabled | disabled | Indica che la selezione dell'elemento è disabilitata. |
| label | text | Definisce un nome per un elemento dell'elenco. |
| selected | selected | Imposta che l'opzione deve essere selezionata per impostazione predefinita al caricamento della pagina. |
| value | text | Definisce il valore inviato al server. |
Il tag <option> supporta gli Attributi globali e gli Attributi evento.
Gli attributi selected e disabled
selected contrassegna l'opzione pre-selezionata al caricamento della pagina. disabled rende un'opzione visibile ma non selezionabile (appare in grigio). In questo esempio Blue è selezionata per impostazione predefinita e Green non può essere scelta:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<select>
<option value="red">Red</option>
<option value="blue" selected>Blue</option>
<option value="green" disabled>Green</option>
</select>
</body>
</html>Un'opzione segnaposto
Un <select> mostra sempre la prima opzione per impostazione predefinita, quindi non esiste un "segnaposto" integrato come quello presente su un campo di testo. Il pattern comune consiste nell'aggiungere una prima opzione vuota, disabled e selected. Invita l'utente a effettuare una scelta, non può essere inviata come valore reale e non può essere riselezionata una volta che l'utente ha scelto qualcos'altro:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<label for="size">Pick a size:</label>
<select id="size" name="size" required>
<option value="" disabled selected>Choose one</option>
<option value="s">Small</option>
<option value="m">Medium</option>
<option value="l">Large</option>
</select>
</body>
</html>L'attributo required appartiene all'elemento <select>, non a <option>. Poiché il segnaposto sopra ha un value vuoto, il form non può essere inviato finché l'utente non sceglie un'opzione reale.
Disabilitare un intero gruppo
L'attributo disabled funziona anche su un <optgroup>, disabilitando tutte le opzioni al suo interno in una sola volta — utile per mostrare categorie temporaneamente non disponibili:
<select>
<optgroup label="In stock">
<option value="apple">Apple</option>
<option value="pear">Pear</option>
</optgroup>
<optgroup label="Out of stock" disabled>
<option value="mango">Mango</option>
<option value="kiwi">Kiwi</option>
</optgroup>
</select>L'attributo label
L'attributo label fornisce una didascalia alternativa per l'opzione. Quando label è impostato, i browser lo mostrano al posto del contenuto testuale. Se si omette label, il testo tra i tag viene usato come etichetta — motivo per cui di solito viene omesso e il testo visibile viene scritto direttamente.
<select>
<!-- The user sees "Cat", not "Felis catus" -->
<option value="cat" label="Cat">Felis catus</option>
<option value="dog">Dog</option>
</select>In pratica label è raramente necessario su un semplice <option>; risulta più significativo su un <optgroup>, dove label dà il nome all'intestazione del gruppo.