HTML <datalist> -tag


Voorbeeld

Een datalijst met voorgedefinieerde opties (gekoppeld aan een <input> element):

<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Definitie en gebruik

De <datalist>tag specificeert een lijst met vooraf gedefinieerde opties voor een <input>-element.

De <datalist>tag wordt gebruikt om een ​​"autocomplete"-functie te bieden voor <input>-elementen. Gebruikers zien een vervolgkeuzelijst met vooraf gedefinieerde opties terwijl ze gegevens invoeren.

Het <datalist>id-attribuut van het element moet gelijk zijn aan het list-attribuut van het <input>-element (dit bindt ze samen).


Browserondersteuning

De getallen in de tabel geven de eerste browserversie aan die het element volledig ondersteunt.

Element
<datalist> 20.0 10.0 4.0 12.1 9.5

Algemene kenmerken

De <datalist>tag ondersteunt ook de Global Attributes in HTML .


Gebeurteniskenmerken

De <datalist>tag ondersteunt ook de Event Attributes in HTML .


Gerelateerde pagina's

HTML DOM-referentie: Datalist-object


Standaard CSS-instellingen

De meeste browsers geven het <datalist>element weer met de volgende standaardwaarden:

datalist {
  display: none;
}