Hvad bruges datalist elementet til?
HTML-elementet datalist kan bruges til at give brugeren mulighed for at vælge fra et foruddefineret sæt af muligheder, når de udfylder et inputfelt. Det gør det lettere for brugeren at indtaste data ved at vise dem et dropdown-menu med de mulige valgmuligheder.
Datalist-elementet kan bruges til at oprette et dropdown-menu for inputfelter, hvor brugeren skal indtaste et ord eller en sætning. Det kan være et felt til at indtaste en by, et postnummer, et produktnavn eller lignende.
Når brugeren starter med at indtaste en tekst i feltet, vil datalist-elementet vise et dropdown-menu med de foruddefinerede muligheder. Brugeren kan derefter vælge et af de foruddefinerede elementer fra dropdown-menuen, og det vil blive indsat i feltet.
Datalist-elementet gør det lettere og hurtigere for brugere at udfylde et inputfelt, da de ikke behøver at skrive hele ordet eller sætningen, hvis de ikke ønsker det. Det også gør det lettere for webstedet at kontrollere, at den data, brugeren indtaster, er korrekt, da den kun accepterer de foruddefinerede muligheder.
Eksempler på datalist
Eksempel 1:
<input type=”text” list=”fruer”>
<datalist id=”fruer”>
<option value=”Æble”>
<option value=”Banan”>
<option value=”Pære”>
<option value=”Fersken”>
</datalist>
Dette eksempel viser en tekstboks med en datalist, der indeholder forskellige frugter. Når brugeren begynder at skrive i tekstboksen, vil de frugter, der findes i listen, dukke op som mulige forslag.
Eksempel 2:
<input type=”text” list=”byer”>
<datalist id=”byer”>
<option value=”København”>
<option value=”Odense”>
<option value=”Aarhus”>
<option value=”Aalborg”>
</datalist>
Dette eksempel viser en tekstboks med en datalist, der indeholder forskellige danske byer. Når brugeren begynder at skrive i tekstboksen, vil de byer, der findes i listen, dukke op som mulige forslag.
Eksempel 3:
<input type=”text” list=”farver”>
<datalist id=”farver”>
<option value=”Rød”>
<option value=”Grøn”>
<option value=”Blå”>
<option value=”Gul”>
</datalist>
Dette eksempel viser en tekstboks med en datalist, der indeholder forskellige farver. Når brugeren begynder at skrive i tekstboksen, vil de farver, der findes i listen, dukke op som mulige forslag.