Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Using the Select Element for Avattavissa Valikoissa | HTML-Lomakkeet ja Käyttäjän Syöte
HTML:n Perusteet

book
Using the Select Element for Avattavissa Valikoissa

Elementti <select> käytetään luomaan avattava valikko, josta käyttäjä voi valita vaihtoehtoja. Sitä käytetään tyypillisesti lomakkeissa, joissa käyttäjän on valittava ennalta määritellyistä vaihtoehdoista. Se käytetään aina yhdessä <option>-elementtien kanssa. <option>-elementit määrittelevät yksittäiset kohteet avattavassa valikossa.

html

index.html

copy
<form onsubmit="return false">
<select>
<option value="tomato">tomato</option>
<option value="cucumber">cucumber</option>
<option value="lettuce">lettuce</option>
</select>
<button type="submit">Submit</button>
</form>

Elementillä <select> on myös useita attribuutteja, joita voidaan käyttää sen toiminnan muokkaamiseen, mukaan lukien:

  • name: valintaelementin nimi, jota käytetään lomakkeen lähettämisessä;

  • size: näkyvien vaihtoehtojen määrä avattavassa valikossa;

  • multiple: jos läsnä, sallii käyttäjän valita useita vaihtoehtoja;

  • disabled: jos läsnä, poistaa valintaelementin käytöstä.

Jakaaksesi luettelon erillisiin, toisistaan riippumattomiin ryhmiin, voit käyttää <optgroup>-tagia. label-attribuuttia käytetään antamaan ryhmälle otsikko.

html

index.html

copy
<form onsubmit="return false">
<label for="sport">Favorite Sport</label>
<select name="sport" id="sport">
<optgroup label="Team sport">
<option value="soccer">soccer</option>
<option value="basketball">basketball</option>
<option value="hockey">hockey</option>
</optgroup>

<optgroup label="Individual sport">
<option value="boxing">boxing</option>
<option value="swimming">swimming</option>
<option value="skiing">skiing</option>
</optgroup>
</select>
<button type="submit">Submit</button>
</form>

Huomautus

Oletuksena ensimmäinen <option> on valittu luettelossa. Jos haluat muuttaa sitä, voit lisätä selected-attribuutin mihin tahansa <option>-elementtiin.

question mark

Mikä on <select>-elementin pääasiallinen tehtävä HTML:ssä?

Select the correct answer

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 5. Luku 8

Kysy tekoälyä

expand
ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

some-alt