Тег datalist

Тег datalist HTML шаклидаги кириш майдонлари input учун автотўлдириш яратади.

Автотўлдиришнинг моҳияти: фойдаланувчи кириш майдонига бирор нарса термоқчи бўлганда, унинг остида мавжуд танловлар рўйхатидан иборат пастки пайдо бўладиган кўрсаткич пайдо бўлади. Фойдаланувчи таклиф этилган вариантлардан бирини тўлиқ термасдан танлаш имконига эга бўлади.

input тегига автотўлдиришни боглаш учун, унга list атрибутини белгилаш керак, бунда богланаётган datalist тегининг id атрибути кўрсатилиши керак.

Танлов вариантлари ўз навбатида datalist тегида жойлашган option тегларида сақланади.

Мисол

Келинг, кириш майдонига davlat номини киритайлик. Аввал 'b' ҳарфини киритамиз - ва учта davlatдан иборат пастки кўрсаткични кўрамиз. Сўнгра яна 'e' ҳарфини киритамиз - таклиф этилган davlatlar сони иккитага камаяди:

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

Мисол

Келинг, энди option тегига value атрибутини қўшайлик. Муайян bir davlatни танлаганда, богланган инпутга davlat номи эмас, балки value атрибутининг мундарижаси тушади:

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

Мисол . Autocomplete атрибутининг таъсири

Пастки кўрсаткичлар рўйхатига autocomplete атрибути таъсир кўрсатади. Агар у ёпиқ бўлса (андак бундай бўлади), сиз datalist тегида белгилаган қийматларга фойдаланувчи илгари шу майдонга киритган қийматлар аралашиши мумкин.

Майдонга 'Brazil' ни киритиб, юбориш тугмасини босиң (юборилмаса браузер бу davlatни эслаб қолмайди). Сўнгра бу мисолга қайтинг ва 'b' ҳарфини киритинг - пайдо бўлган рўйхатда сиз datalist дан 3 та davlatнигина эмас, балки илгари киритилган davlatни ҳам кўрасиз (бундан ташқари, агар 'Belarus' сўзи билан ҳам шуни қилсангиз - пастки рўйхатда бу қиймат икки марта кўриниши мумкин).

Агар бу сизга тўсиқ бўлса - autocomplete атрибутини унга off қийматини қўшиб ёпинг.

Юқорида тавсирилган амалиётларни мисол билан бажаринг:

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

Шунингдек қаранг

autocomplete атрибути,
шакл майдонлари учун автотўлдиришни белгилайди