HTML <select> -elementti

Määrittely ja käyttö

<select> Elementti käytetään luomaan laskettelulista.

<select> Elementti käytetään yleensä lomakkeissa, kerätäkseen käyttäjän syötteitä.

Lähetettään lomakkeen jälkeen, käyttämällä name-ominaisuutta viitataksesi lomakkeen tietoihin (jos name-ominaisuutta ei mainita, laskettelulistan tiedot eivät lähetetä).

<select> Elementin sisällä <option>-tunniste Määritä käytettävissä olevat vaihtoehdot laskettelulistassa.

Käytetään id-ominaisuutta yhdistääkseen laskettelulistan ja tunniste (label).

Vinkki:Lisää aina <label>-tunniste saadaksesi parhaan saavutettavuuskäytännön!

Katso myös:

HTML DOM -viittausopas:Select-objekti

CSS-opas:Aseta lomakkeen tyyli

Esimerkki

Esimerkki 1

Luo laskettelulista, joka sisältää neljä vaihtoehtoa:

<label for="cars">Valitse autovalmiste:</label>
<select name="cars" id="cars">
  <option value="audi">Audi</option>
  <option value="byd">BYD</option>
  <option value="geely">Geely</option>
  <option value="volvo">Volvo</option>
</select>

Kokeile itse!

Esimerkki 1

Esimerkki 2 <select> Käytetään yhdessä <optgroup>-tunnisteiden kanssa:

<label for="cars">Valitse autovalmiste:</label>
<select name="cars" id="cars">
  <optgroup label="Kiinan autoja">
    <option value="byd">BYD</option>
    <option value="geely">Geely</option>
  </optgroup>
  <optgroup label="Saksan autoja">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

Kokeile itse!

Atribuutti

Atribuutti Arvo Kuvaus
autofocus autofocus Säännöllä tulisi saada automaattisesti keskittyminen sivun lataamisen yhteydessä.
disabled disabled Säännöllä tulisi olla käytöstä poissa.
form Lomakkeen id Määrittää laskettelulistan kuuluvan lomakkeen.
multiple multiple Säännöllä voidaan valita useita vaihtoehtoja kerralla.
name Nimi Määrittelee valintalistan nimen.
required required Määrittelee, että käyttäjän on valittava arvo ennen lomakkeen lähettämistä.
size Luku Määrittelee, kuinka monta näkyvää vaihtoehtoa valintalista sisältää.

Globaalit ominaisuudet

<select> Tunniste tukee myös HTML:ssä olevat globaalit ominaisuudet.

Tapahtumavaiheet

<select> Tunniste tukee myös HTML:ssä olevat tapahtumavaiheet.

Oletusarvoinen CSS-asetus

Ei mitään.

Selaimen tuki

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Tuki Tuki Tuki Tuki Tuki