Select-tagi
select -tagi luo pudotusvalikon
käytettäväksi HTML-lomakkeissa.
Yksittäinen listan kohta tulee sijoittaa
option -tagin sisään.
Attribuutit
| Attribuutti | Kuvaus |
|---|---|
multiple |
Tämän attribuutin läsnäolo luo monivalinnan -
pudotusvalikon, josta voi valita useita kohtia pitämällä
Ctrl -nappulaa painettuna tai valitsemalla ne hiirellä.
Valinnainen attribuutti. |
name |
Pudotusvalikon nimi. Tarvitaan, jotta kentän data voidaan hakea PHP:llä. Jotta lomake toimii oikein, syöttökenttien nimien ei tulisi olla samat keskenään (yhdessä lomakkeessa). Jos ne ovat samat, PHP:hen tulee data siitä syöttökentästä, joka on alempana HTML-koodissa. |
Esimerkki
Katsotaan kuinka pudotusvalikko toimii:
<select>
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Esimerkki
Tehdään pudotusvalikon leveydestä
yhtä suuri kuin suurimman elementin leveys (jos
sitä ei ole erikseen määritetty CSS-ominaisuudella
width):
<select>
<option>Big City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Esimerkki . Oletusvalinta
Yritetään nyt valita kaupunki
oletuksena. Tehdään tämä selected -attribuutin avulla:
<select>
<option>Big City1</option>
<option selected>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Esimerkki . Monivalinta
Muutetaan nyt tavallinen valikko
monivalinnaksi multiple -attribuutin avulla:
<select multiple name="city[]">
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
Huomaa, että valikolle asetettu nimi name -attribuutissa
tulee olla hakasulkeilla lopussa. Tämä on tarpeen, jotta PHP:hen
tulisi kaikki valitut arvot (muuten tulee vain yksi - viimeinen).
Esimerkki . Useita oletusarvoja monivalinnassa
Yritetään nyt monivalinnassa oletuksena valita useampi kuin yksi arvo:
<select multiple name="city[]">
<option>City1</option>
<option selected>City2</option>
<option>City3</option>
<option selected>City4</option>
</select>
:
