Elementet <datalist> i HTML används för att skapa en fördefinierad lista med alternativ för ett <input>-element. Det tillåter användaren att välja ett alternativ från listan samtidigt som de också har möjlighet att ange ett eget värde om de så önskar. Listan med fördefinierade värden förblir dold tills användaren börjar skriva i det associerade textfältet. <datalist> är kopplat med ett id-attribut, och <input> är länkat till det med hjälp av list-attributet.

Sammantaget kan <datalist>-elementet vara ett hjälpsamt sätt att tillhandahålla en fördefinierad lista med alternativ för användare att välja från, samtidigt som de fortfarande har flexibiliteten att ange ett eget värde om det behövs.

Exempel

När användaren börjar skriva i kategorifältet kommer webbläsaren att visa de fördefinierade kategorierna från datalist. Om ingen av alternativen matchar användarens inmatning kan de fortfarande skriva sin egen kategori. Detta tillåter användaren att välja från en lista och manuellt ange ett värde om det behövs.

• <label for="category">: märker inmatningsfältet, vilket indikerar för användaren att de ska välja eller ange en produktkategori;

• <input type="text" name="category" id="category" list="categories"/>: inmatningsfältet där användaren antingen kan skriva en kategori eller välja från de tillgängliga alternativen. Attributet list="categories" länkar denna inmatning till datalist med ID categories;

• <datalist id="categories">: detta innehåller en lista över fördefinierade produktkategorier. Dessa alternativ kommer att visas som förslag när användaren börjar skriva i inmatningsfältet;

• <option value="...">: varje option representerar en produktkategori i listan. Användaren kan välja en av dessa kategorier eller skriva sitt eget värde om det inte matchar något av alternativen.