De tag datalist
De tag datalist creëert automatisch aanvullen
voor invoervelden input
in een HTML formulier.
De essentie van automatisch aanvullen: wanneer de gebruiker iets probeert in te typen in het invoerveld, zal er vanonder een pop-up hint verschijnen, die een lijst met beschikbare keuzeopties zal voorstellen. De gebruiker kan een van de voorgestelde opties selecteren, zonder deze volledig in te hoeven typen.
Om automatisch aanvullen aan een input-tag
te koppelen, moet je het het attribuut
list geven, waarin het id-attribuut
van de gekoppelde datalist-tag moet worden gespecificeerd.
De keuzeopties worden opgeslagen in option-tags,
die op hun beurt in de datalist-tag staan.
Voorbeeld
Laten we een land invoeren in het invoerveld. Laten we eerst
de letter 'b' typen - en we zien een pop-up
hint met drie landen. Vervolgens typen we ook
de letter 'e' - het aantal voorgestelde
landen wordt teruggebracht tot twee:
<input type="text" list="country">
<datalist id="country">
<option>Belarus</option>
<option>Belgium</option>
<option>Bulgaria</option>
</datalist>
:
Voorbeeld
Laten we nu aan de option-tag het
value-attribuut toevoegen. Bij het selecteren van een bepaald
land zal niet de landsnaam in het gekoppelde invoerveld
verschijnen, maar de inhoud van het value-attribuut:
<input type="text" list="country-value">
<datalist id="country-value">
<option value="Belarus">Belarus - a country of lakes and potatoes</option>
<option value="Belgium">Belgium - a country where Belgians live</option>
<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>
:
Voorbeeld . Invloed van het autocomplete-attribuut
De dropdown-lijst met hints wordt beïnvloed
door het autocomplete-attribuut.
Als het ingeschakeld is (en dat is standaard het geval),
dan zullen aan de waarden die je in de
datalist-tag hebt ingesteld, de waarden worden toegevoegd
die de gebruiker eerder in dit veld heeft ingevoerd.
Typ 'Brazil' in het veld en klik op
de verzendknop (zonder verzending zal de browser dit land niet onthouden).
Keer dan terug naar dit voorbeeld
en typ de letter 'b' - in de verschenen
lijst zie je niet alleen 3 landen
uit de datalist, maar ook het eerder ingetypte land (behalve
dat, als je hetzelfde doet met het woord
'Belarus' - in de dropdown-lijst zal
deze waarde twee keer voorkomen).
Als dit je stoort - schakel dan het autocomplete-attribuut uit,
door het de waarde off te geven.
Voer de hierboven beschreven handelingen uit met het voorbeeld:
<form action="">
<input type="text" list="country" autocomplete="on">
<datalist id="country">
<option>Belarus</option>
<option>Belgium</option>
<option>Bulgaria</option>
<input type="submit">
</datalist>
</form>
:
Zie ook
-
het attribuut
autocomplete,
dat automatisch aanvullen voor formuliervelden instelt
