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:
<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):
<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:
<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:
<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:
<select multiple name="city[]">
<option>Città1</option>
<option selected>Città2</option>
<option>Città3</option>
<option selected>Città4</option>
</select>
:
