Datalist-elementin Käyttäminen Ennalta Määritettyihin Syöte-Ehdotuksiin
HTML:n <datalist>-elementtiä käytetään luomaan ennalta määritelty luettelo vaihtoehdoista <input>-elementille. Sen avulla käyttäjä voi valita vaihtoehdon luettelosta, mutta hänellä on myös mahdollisuus syöttää oma arvo halutessaan. Ennalta määriteltyjen arvojen luettelo pysyy piilossa, kunnes käyttäjä alkaa kirjoittaa liitettyyn tekstikenttään. <datalist> yhdistetään id-attribuutilla, ja <input> liitetään siihen käyttämällä list-attribuuttia.
index.html
<datalist>-elementti on hyödyllinen, kun halutaan tarjota käyttäjälle ehdotuksia rajoittamatta häntä kiinteään valikoimaan vaihtoehtoja.
Esimerkki
Kun käyttäjä kirjoittaa kenttään, selain näyttää ennalta määritetyt kategoriat. Jos mikään ei vastaa, käyttäjä voi silti syöttää oman arvonsa.
index.html
<label for="category">: kuvaa syötekentän tarkoituksen;<input type="text" name="category" id="category" list="categories"/>: tekstikenttä, joka näyttää ehdotuksia linkitetystä datalistasta;<datalist id="categories">: sisältää ennalta määritetyt vaihtoehdot, jotka näkyvät vihjeinä kirjoitettaessa;<option value="...">: edustaa jokaista ehdotettua vaihtoehtoa.
1. Mitä HTML-elementtiä käytetään luomaan avattava valikko, jossa on useita vaihtoehtoja?
2. Mikä on datalist-elementin tarkoitus?
3. Mitä attribuuttia käytetään yhdistämään datalist-elementti input-elementtiin?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Mahtavaa!
Completion arvosana parantunut arvoon 2.38Datalist-elementin Käyttäminen Ennalta Määritettyihin Syöte-Ehdotuksiin
Pyyhkäise näyttääksesi valikon
HTML:n <datalist>-elementtiä käytetään luomaan ennalta määritelty luettelo vaihtoehdoista <input>-elementille. Sen avulla käyttäjä voi valita vaihtoehdon luettelosta, mutta hänellä on myös mahdollisuus syöttää oma arvo halutessaan. Ennalta määriteltyjen arvojen luettelo pysyy piilossa, kunnes käyttäjä alkaa kirjoittaa liitettyyn tekstikenttään. <datalist> yhdistetään id-attribuutilla, ja <input> liitetään siihen käyttämällä list-attribuuttia.
index.html
<datalist>-elementti on hyödyllinen, kun halutaan tarjota käyttäjälle ehdotuksia rajoittamatta häntä kiinteään valikoimaan vaihtoehtoja.
Esimerkki
Kun käyttäjä kirjoittaa kenttään, selain näyttää ennalta määritetyt kategoriat. Jos mikään ei vastaa, käyttäjä voi silti syöttää oman arvonsa.
index.html
<label for="category">: kuvaa syötekentän tarkoituksen;<input type="text" name="category" id="category" list="categories"/>: tekstikenttä, joka näyttää ehdotuksia linkitetystä datalistasta;<datalist id="categories">: sisältää ennalta määritetyt vaihtoehdot, jotka näkyvät vihjeinä kirjoitettaessa;<option value="...">: edustaa jokaista ehdotettua vaihtoehtoa.
1. Mitä HTML-elementtiä käytetään luomaan avattava valikko, jossa on useita vaihtoehtoja?
2. Mikä on datalist-elementin tarkoitus?
3. Mitä attribuuttia käytetään yhdistämään datalist-elementti input-elementtiin?
Kiitos palautteestasi!
