Het <datalist>-element in HTML wordt gebruikt om een vooraf gedefinieerde lijst met opties te maken voor een <input>-element. Het stelt de gebruiker in staat om een optie uit de lijst te selecteren, terwijl ze ook de mogelijkheid hebben om hun eigen waarde in te voeren als ze dat willen. De lijst met vooraf gedefinieerde waarden blijft verborgen totdat de gebruiker begint te typen in het bijbehorende tekstveld. De <datalist> wordt gekoppeld met een id-attribuut, en de <input> is eraan gekoppeld met behulp van het list-attribuut.

Over het algemeen kan het <datalist>-element een nuttige manier zijn om een vooraf gedefinieerde lijst met opties te bieden waaruit gebruikers kunnen kiezen, terwijl ze toch de flexibiliteit hebben om hun eigen waarde in te voeren indien nodig.

Voorbeeld

Wanneer de gebruiker begint te typen in het invoerveld voor de categorie, zal de browser de vooraf gedefinieerde categorieën uit de datalist weergeven. Als geen van de opties overeenkomt met de invoer van de gebruiker, kunnen ze nog steeds hun eigen categorie typen. Dit stelt de gebruiker in staat om te kiezen uit een lijst en handmatig een waarde in te voeren indien nodig.

• <label for="category">: labelt het invoerveld, wat aangeeft aan de gebruiker dat ze een productcategorie moeten selecteren of invoeren;

• <input type="text" name="category" id="category" list="categories"/>: het invoerveld waar de gebruiker een categorie kan typen of selecteren uit de beschikbare opties. Het list="categories" attribuut koppelt deze invoer aan de datalist met de ID categories;

• <datalist id="categories">: dit bevat een lijst van vooraf gedefinieerde productcategorieën. Deze opties verschijnen als suggesties wanneer de gebruiker begint te typen in het invoerveld;

• <option value="...">: elke option vertegenwoordigt een productcategorie in de lijst. De gebruiker kan een van deze categorieën selecteren of hun eigen waarde typen als deze niet overeenkomt met een van de opties.