Тэг datalist

Тэг datalist стварае аўтазапаўненне для палёў уводу input ў HTML форме.

Сутнасць аўтазапаўнення: калі карыстальнік будзе спрабаваць набраць штосьці ў поле ўводу, знізу будзе з'яўляцца ўсплываючая падказка, якая будзе прадстаўляць сабой спіс даступных варыянтаў выбару. Карыстальнік зможа выбраць адзін з прапанаваных варыянтаў, не ўводзячы яго да канца.

Каб прывязаць да тэга input аўтазапаўненне, яму неабходна задаць атрыбут list, у якім варта паказаць атрыбут id прывязваемага тэга datalist.

Варыянты выбару захоўваюцца ў тэгах option, якія ў сваю чаргу захоўваюцца ў тэге datalist.

Прыклад

Давайце ў поле ўводу ўвядзем краіну. Увядзем у пачатку літару 'b' - і ўбачым усплываючую падказку з трох краін. Затым увядзем яшчэ і літару 'e' - колькасць прапанаваных краін скараціцца да двух:

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

Прыклад

Давайце цяпер да тэга option дадзім атрыбут value. Пры выбары пэўнай краіны ў прывязаны інпут трапіць не назва краіны, а змест атрыбута 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' і націсніце кнопку адпраўкі (без адпраўкі браўзэр не запомніць гэтую краіну). Затым вярніцеся да гэтага прыкладу і ўвядзіце літару 'b' - у які з'явіўся спісе вы ўбачыце не толькі 3 краіны з datalist, але і ўбітую раней краіну (акрамя таго, калі вы праробіце тое ж самае са словам '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,
які задае аўтазапаўненне палям формы