(interpretuje: Internet Explorer 10, Firefox, Opera, Chrome)

<input list="identyfikator">
<datalist id="identyfikator">
	<option value="wartość1">
	<option value="wartość2">
	...
</datalist>

Większość przeglądarek posiada funkcję tzw. autouzupełniania elementów formularzy. Jeżeli użytkownik wpisze coś w formularzu, a potem go wyśle, to kiedy będzie następnym razem wypełniał ten sam formularz, przeglądarka wyświetli mu podpowiedzi w postaci wartości, które wcześniej wpisywał w wybranych polach. Taki mechanizm jest bardzo wygodny, ponieważ pozwala zaoszczędzić użytkownikowi sporo czasu na wprowadzaniu wciąż tych samych danych. Twórcy stron WWW również mogą wykorzystać ten system, dodając do automatycznych sugestii własne wartości. W ten sposób nawet jeżeli użytkownik dopiero pierwszy raz wypełnia formularz, od razu zobaczy właściwe podpowiedzi wartości, które może wpisać w określonych polach.

Listę dodatkowych podpowiedzi umieszcza się w postaci opcji (OPTION), zawartych w znaczniku DATALIST, któremu nadaje się odpowiedni identyfikator. Aby podpiąć takie sugestie do wybranego pola INPUT w formularzu, wystarczy przypisać mu atrybut list="..." o wartości takiej samej, jak identyfikator wybranej listy z opcjami podpowiedzi.

Jeżeli tekst automatycznych podpowiedzi jest dość długi, możemy wyświetlić użytkownikowi jego formę skróconą, po wybraniu której do pola zostanie wstawiona oryginalna, długa wartość:

<input list="identyfikator">
<datalist id="identyfikator">
	<option value="wartość1" label="skrót1">
	<option value="wartość2" label="skrót2">
</datalist>

Element DATALIST nie wyświetla się na ekranie, dlatego nie powinien sprawiać kłopotów w przeglądarkach, które nie obsługują HTML5. Wtedy użytkownik będzie zmuszony co prawda ręcznie wpisać pełną wartość w polu, ale przynajmniej w formularzu nie pojawią się żadne nieoczekiwane elementy. Czasami jednak może nam zależeć, aby opcje podpowiedzi zostały wyświetlone w starszych przeglądarkach. Z taką sytuacją możemy mieć do czynienia, gdy w wybranym polu należy wpisać w zasadzie jedną z podanych wartości, a nie dowolny tekst. Taki efekt powinniśmy uzyskać, wstawiając dodatkowy znacznik SELECT - nowsze przeglądarki po prostu go pominą, stosując mechanizm autouzupełniania, a starsze wyświetlą standardową listę rozwijalną:

<input name="nazwa" list="identyfikator">
<datalist id="identyfikator">
	<select name="nazwa">
		<option value="wartość1" label="skrót1">
		<option value="wartość2" label="skrót2">
	</select>
</datalist>