Taggen datalist

Taggen datalist oppretter autofullføring for inndatafelt input i HTML skjema.

Kjernen i autofullføring: når brukeren prøver å skrive noe i inndatafeltet, vil det dukke opp en hjelpetekst nedenfor som vil representere en liste over tilgjengelige valgalternativer. Brukeren kan velge ett av de foreslåtte alternativene uten å skrive det helt ferdig.

For å knytte autofullføring til taggen input må den tildeles attributtet list, der man skal spesifisere attributtet id på den tilknyttede taggen datalist.

Valgalternativer lagres i taggene option, som igjen lagres i taggen datalist.

Eksempel

La oss skrive inn et land i inndatafeltet. La oss skrive bokstaven 'b' først - og vi vil se en oppsprett med tre land. Deretter skriver vi bokstaven 'e' til - antall foreslåtte land vil reduseres til to:

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

Eksempel

La oss nå legge til attributtet value til taggen option. Når et bestemt land velges, vil det ikke være landets navn som havner i det tilknyttede inputfeltet, men innholdet i attributtet value:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - et land med innsjøer og poteter</option>
	<option value="Belgium">Belgium - et land der belgiere bor</option>
	<option value="Bulgaria">Bulgaria - et land for ferie</option>
</datalist>

Eksempel . Påvirkning av autocomplete-attributtet

Attributtet autocomplete påvirker rullelisten med forslag. Hvis den er aktivert (noe den er som standard), vil de verdiene du har satt i taggen datalist, blandes med de verdiene som brukeren tidligere har skrevet inn i dette feltet.

Skriv inn 'Brazil' i feltet og trykk på send-knappen (uten sending vil ikke nettleseren huske dette landet). Deretter kommer du tilbake til dette eksempelet og skriver inn bokstaven 'b' - i listen som dukker opp vil du se ikke bare 3 land fra datalist, men også det tidligere innskrevne landet (i tillegg, hvis du gjør det samme med ordet 'Belarus' - vil denne verdien vises to ganger i rullelisten).

Hvis dette forstyrrer deg - deaktiver attributtet autocomplete, ved å gi det verdien off.

Utfør manipulasjonene beskrevet ovenfor med eksempelet:

<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>

Se også

attributtet autocomplete,
som setter autofullføring for skjemafelter