Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Utilizzare l'Elemento Select per i Menu a Tendina | Moduli HTML e Input Utente
HTML Definitivo

book
Utilizzare l'Elemento Select per i Menu a Tendina

L'elemento <select> viene utilizzato per creare un elenco a discesa di opzioni tra cui l'utente può scegliere. Viene tipicamente utilizzato nei moduli in cui l'utente deve scegliere da un insieme predefinito di opzioni. Viene sempre utilizzato in combinazione con gli elementi <option>. Gli elementi <option> definiscono i singoli elementi nell'elenco a discesa.

html

index.html

copy
<form onsubmit="return false">
<select>
<option value="tomato">tomato</option>
<option value="cucumber">cucumber</option>
<option value="lettuce">lettuce</option>
</select>
<button type="submit">Submit</button>
</form>

L'elemento <select> ha anche diversi attributi che possono essere utilizzati per modificare il suo comportamento, tra cui:

  • name: il nome dell'elemento select, utilizzato quando si invia il modulo;
  • size: il numero di opzioni visibili nell'elenco a discesa;
  • multiple: se presente, consente all'utente di selezionare più opzioni;
  • disabled: se presente, disabilita l'elemento select.

Per dividere un elenco in gruppi separati e non correlati, puoi utilizzare il tag <optgroup>. L'attributo label viene utilizzato per assegnare un titolo al gruppo.

html

index.html

copy
<form onsubmit="return false">
<label for="sport">Favorite Sport</label>
<select name="sport" id="sport">
<optgroup label="Team sport">
<option value="soccer">soccer</option>
<option value="basketball">basketball</option>
<option value="hockey">hockey</option>
</optgroup>

<optgroup label="Individual sport">
<option value="boxing">boxing</option>
<option value="swimming">swimming</option>
<option value="skiing">skiing</option>
</optgroup>
</select>
<button type="submit">Submit</button>
</form>

Nota

Per impostazione predefinita, la prima <option> è scelta nell'elenco. Se vuoi cambiarla, puoi fornire l'attributo selected a qualsiasi elemento <option>.

question mark

Qual è la funzione principale dell'elemento <select> in HTML?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 5. Capitolo 8
We use cookies to make your experience better!
some-alt