Il tag select

Il tag select crea un menu a tendina per l'uso nei moduli HTML.

Una singola voce del menu deve essere contenuta nel tag option.

Attributi

Attributo	Descrizione
`multiple`	La presenza di questo attributo crea una selezione multipla - un menu a tendina in cui è possibile selezionare più voci, tenendo premuto il tasto `Ctrl` o selezionandole con il mouse. Attributo opzionale.
`name`	Il nome del menu a tendina. Serve per recuperare i dati del campo in PHP. Per il corretto funzionamento del modulo, i nomi dei campi non devono coincidere tra loro (nello stesso modulo). Se coincidono - in PHP arriveranno i dati del campo che si trova più in basso nel codice HTML.

Esempio

Vediamo come funziona un menu a tendina:

html<select>
  <option>Città1</option>
  <option>Città2</option>
  <option>Città3</option>
  <option>Città4</option>
</select>

Результат:

Esempio

Rendiamo la larghezza del menu a tendina uguale alla larghezza dell'elemento più grande (se non è specificata esplicitamente tramite la proprietà CSS width):

html<select>
  <option>Grande Città1</option>
  <option>Città2</option>
  <option>Città3</option>
  <option>Città4</option>
</select>

Результат:

Esempio . Selezione predefinita

Ora proviamo a selezionare una città predefinita. Facciamolo con l'attributo selected:

html<select>
  <option>Grande Città1</option>
  <option selected>Città2</option>
  <option>Città3</option>
  <option>Città4</option>
</select>

Результат:

Esempio . Selezione multipla

Ora trasformiamo un menu a tendina normale in uno a selezione multipla con l'attributo multiple:

html<select multiple name="city[]">
  <option>Città1</option>
  <option>Città2</option>
  <option>Città3</option>
  <option>Città4</option>
</select>

Результат:

Nota che il nome del menu, impostato nell'attributo name, deve essere con parentesi quadre alla fine. Questo è necessario affinché in PHP arrivino tutti i valori selezionati (altrimenti ne arriverà solo uno - l'ultimo).

Esempio . Più valori predefiniti nella selezione multipla

Ora, nella selezione multipla predefinita, proviamo a selezionare più di un valore:

html<select multiple name="city[]">
  <option>Città1</option>
  <option selected>Città2</option>
  <option>Città3</option>
  <option selected>Città4</option>
</select>

Результат:

Vedi anche

l'attributo selected,
che imposta la voce selezionata per impostazione predefinita
il tag optgroup,
che raggruppa le voci del menu
il tag datalist,
che crea un menu a tendina