HTML:n <datalist>-elementtiä käytetään luomaan ennalta määritelty luettelo vaihtoehdoista <input>-elementille. Se antaa käyttäjälle mahdollisuuden valita vaihtoehto luettelosta, mutta myös mahdollisuuden syöttää oma arvo, jos he niin haluavat. Ennalta määriteltyjen arvojen luettelo pysyy piilossa, kunnes käyttäjä alkaa kirjoittaa siihen liittyvään tekstikenttään. <datalist> on yhdistetty id-attribuutilla, ja <input> on linkitetty siihen list-attribuutin avulla.

Kaiken kaikkiaan <datalist>-elementti voi olla hyödyllinen tapa tarjota ennalta määritelty luettelo vaihtoehdoista, joista käyttäjät voivat valita, samalla kun heille annetaan joustavuutta syöttää oma arvo tarvittaessa.

Esimerkki

Kun käyttäjä alkaa kirjoittaa kategoria syöttökenttään, selain näyttää ennalta määritetyt kategoriat datalist-elementistä. Jos mikään vaihtoehdoista ei vastaa käyttäjän syötettä, hän voi silti kirjoittaa oman kategorian. Tämä mahdollistaa käyttäjän valita listasta ja syöttää manuaalisesti arvon tarvittaessa.

• <label for="category">: merkitsee syöttökentän, osoittaen käyttäjälle, että heidän tulisi valita tai syöttää tuotteen kategoria;

• <input type="text" name="category" id="category" list="categories"/>: syöttökenttä, jossa käyttäjä voi joko kirjoittaa kategorian tai valita saatavilla olevista vaihtoehdoista. list="categories"-attribuutti yhdistää tämän syötön datalist-elementtiin, jonka ID on categories;

• <datalist id="categories">: tämä sisältää listan ennalta määritetyistä tuotekategorioista. Nämä vaihtoehdot näkyvät ehdotuksina, kun käyttäjä alkaa kirjoittaa syöttökenttään;

• <option value="...">: jokainen option edustaa tuotekategoriaa listassa. Käyttäjä voi valita yhden näistä kategorioista tai kirjoittaa oman arvonsa, jos se ei vastaa mitään vaihtoehdoista.