Selectelementti

Selectelementti, tai HTML:n select-elementti, on lomakkeen ohjaus, joka näyttää vaihtoehtojen listan ja antaa käyttäjän valita yhden kohteen. Se ilmenee tavallisesti pudotusvalikkona verkkoselaimissa, mutta useamman vaihtoehdon näkyminen on mahdollista size-attribuutin avulla.

Kontrolli koostuu select-elementistä, johon voi sisältyä yhden tai useamman option-elementin. Tärkeimpiä attribuutteja ovat name ja id lomakkeen lähettämisen ja tunnistamisen kannalta, sekä class tyyliä varten. multiple-attribuutti mahdollistaa useamman valinnan, kun taas disabled estää vuorovaikutuksen. required-varmistaa, että arvo on valittu ennen lomakkeen lähettämistä. Option-elementeillä on arvoattribuutti, jonka arvo lähetetään palvelimelle, sekä näkyvä label-teksti. Optgroup-merkinnöillä voidaan ryhmittää vaihtoehtoja.

Kun lomake lähetetään, valitun optionin arvo lähetetään palvelimelle. Mikäli multiple on käytössä, valittuja arvoja voidaan saada palvelimelle taulukko-muodossa riippuen sovelluksen nimimerkinnästä. Vaihtoehtoisesti kontrollin sisältö voidaan täyttää dynaamisesti JavaScriptin avulla.

Saavutettavuus on huomioitavaa: yhdistä select näkyvään labeliin, varmista näppäimistö- ja ruudunlukijasupport, ja jos et käytä näkyvää labelia, voit käyttää aria-labelia. Tyylittely on selainvastaista ja rajoitettua, joten monimutkaisempi ulkoasu voi tarvita kerroksia tai räätälöityjä valikoita.

Käyttökohteet ovat yleisiä, kuten maiden valinta, tuoteluokkien määrittäminen ja muut ennalta määritellyt listat. Suuren listan tapauksessa voi harkita ryhmittelyä, hakua tai vaihtoehtoista syötettä.

Esimerkki:

<select name="country" id="country">

<option value="fi">Finland</option>

<option value="se">Sweden</option>

<option value="no">Norway</option>

</select>