Elementet <datalist> i HTML brukes til å lage en forhåndsdefinert liste med alternativer for et <input>-element. Det lar brukeren velge et alternativ fra listen, samtidig som det gir dem muligheten til å skrive inn sin egen verdi hvis de ønsker det. Listen med forhåndsdefinerte verdier forblir skjult til brukeren begynner å skrive i det tilknyttede tekstfeltet. <datalist> er koblet sammen med en id-attributt, og <input> er koblet til den ved hjelp av list-attributtet.

Generelt kan <datalist>-elementet være en nyttig måte å gi en forhåndsdefinert liste med alternativer for brukere å velge fra, samtidig som de fortsatt har fleksibiliteten til å skrive inn sin egen verdi hvis nødvendig.

Eksempel

Når brukeren begynner å skrive i kategorifeltet, vil nettleseren vise de forhåndsdefinerte kategoriene fra datalist. Hvis ingen av alternativene samsvarer med brukerens inndata, kan de fortsatt skrive inn sin egen kategori. Dette lar brukeren velge fra en liste og manuelt skrive inn en verdi hvis nødvendig.

• <label for="category">: merker inndatafeltet, og indikerer for brukeren at de skal velge eller skrive inn en produktkategori;

• <input type="text" name="category" id="category" list="categories"/>: inndatafeltet der brukeren enten kan skrive inn en kategori eller velge fra de tilgjengelige alternativene. Attributtet list="categories" kobler dette inndatafeltet til datalist med ID categories;

• <datalist id="categories">: dette inneholder en liste over forhåndsdefinerte produktkategorier. Disse alternativene vil vises som forslag når brukeren begynner å skrive i inndatafeltet;

• <option value="...">: hver option representerer en produktkategori i listen. Brukeren kan velge en av disse kategoriene eller skrive inn sin egen verdi hvis den ikke samsvarer med noen av alternativene.