selectelementistä

Select-elementti, tai pudotusvalikko, on HTML-käyttöliittymäkomponentti, jonka avulla käyttäjä voi valita yhden tai useamman vaihtoehdon listasta. Se rakentuu <select>-elementistä, jonka sisällä on <option>-elementtejä.

Rakenne ja olennaiset ominaisuudet: <select> voi saada id-, name- ja class-attribuutit sekä optional multiple-attribuutin, jolla sallitaan useampi valinta. Jokaisella <option>-elementillä on arvo-attribuutti (value), jota lomake lähettää, sekä näkyviin tekstiin perustuva näkyvyys. Oletuksena näyttää ensimmäinen tai määritelty vaihtoehto.

Saavutettavuus: valinta voidaan liittää label-elementtiin käyttämällä for-attribuuttia, jolloin käyttäjä voi klikata tekstiä valitakseen vaihtoehdon. ARIA-merkinnöillä voidaan parantaa käyttöä ruudunlukijoille. Oletus voidaan määrittää käyttämällä selected-attribuuttia.

Toiminnallisuus: Lomake lähetettäessä valittu arvo (tai arvot) välittyvät palvelimelle. JavaScriptissä <select>-elementin arvo saadaan propertyllä value; monivalinnassa käytetään selectedOptions-taulukkoa tai iterointia options-kokoelman yli. Testausta varten useat kehykset, kuten Selenium, tarjoavat helper-luokkia (esimerkiksi SelectElement) valintojen tekemiseen ja arvojen lukemiseen.

Esimerkki:

<select id="fruit" name="fruit">

<option value="apple">Omena</option>

<option value="banana" selected>Banaani</option>

<option value="cherry">Kirsikka</option>

</select>

Käyttötavat: selektiivisen valinnan avulla voi toteuttaa käyttäjälähtöisiä valintaprosesseja, hakulomakkeita ja dynaamisia valikoita. Monivalintaa kannattaa käyttää harkiten, sillä se vaikuttaa sekä käyttöliittymän selkeyteen että tiedon käsittelyyn.