Tagi HTML: datalist

Element <datalist> to narzędzie HTML5 umożliwiające autouzupełnianie pól formularza poprzez dostarczenie użytkownikowi predefiniowanej listy sugestii.

Sam w sobie jest niewidoczny na stronie i działa jako uzupełnienie pola <input>, przypominając w działaniu listę rozwijalną <select>.

Czym jest <datalist>?

Element <datalist> reprezentuje zestaw opcji (elementów option) dla innych kontrolek formularza, przede wszystkim dla pól input. Jego rolą jest wsparcie wpisywania danych poprzez wyświetlanie dopasowanych sugestii.

Kluczowe: <datalist> nie renderuje się jako odrębny interfejs — jego zawartość widać dopiero po powiązaniu z polem input i rozpoczęciu wpisywania.

Jak używać <datalist>?

Powiązanie z elementem <input>

Aby <datalist> zadziałał, połącz go z polem input za pomocą atrybutu list, którego wartość odpowiada atrybutowi id w <datalist>. Oto przykładowe powiązanie:

<label>Wybierz przeglądarkę:</label>
<input list="przegladarki" />

<datalist id="przegladarki">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
</datalist>


W powyższym przykładzie atrybut list="przegladarki" w elemencie input łączy się z <datalist> o identyfikatorze id="przegladarki".

Praktyczne przykłady

Przykład 1 – lista województw

Poniżej formularz z sugestiami nazw polskich województw:

<label>Województwo:</label>
<input type="text" list="wojewodztwa">

<datalist id="wojewodztwa">
<option value="dolnośląskie">
<option value="kujawsko-pomorskie">
<option value="lubelskie">
<option value="lubuskie">
<option value="łódzkie">
<option value="małopolskie">
<option value="mazowieckie">
<option value="opolskie">
<option value="podkarpackie">
<option value="podlaskie">
<option value="pomorskie">
<option value="śląskie">
<option value="świętokrzyskie">
<option value="warmińsko-mazurskie">
<option value="wielkopolskie">
<option value="zachodniopomorskie">
</datalist>


Gdy użytkownik zacznie wpisywać np. „ma”, pojawią się pasujące sugestie: „małopolskie”, „mazowieckie”.

Przykład 2 – lista kolorów

Przykład prostego formularza z autosugestiami nazw kolorów:

<form action="https://example.com/submit">
<label>Podaj nazwę koloru:</label>
<input type="text" name="nazwa-koloru" list="lista-kolorow">

<datalist id="lista-kolorow">
<option>czerwony</option>
<option>zielony</option>
<option>niebieski</option>
<option>czarny</option>
<option>biały</option>
<option>żółty</option>
<option>pomarańczowy</option>
<option>złoty</option>
<option>srebrny</option>
<option>brązowy</option>
</datalist>
</form>


Przykład 3 – gry planszowe

Lista propozycji dla ulubionej gry planszowej:

<label>Ulubiona gra:</label>
<input list="game">

<datalist id="game">
<option value="Szachy"></option>
<option value="Warcaby"></option>
<option value="Bierki"></option>
</datalist>


Atrybuty i właściwości

Element <datalist> nie ma atrybutów obowiązkowych — działa dopiero po powiązaniu z input poprzez atrybut list.

Każdy element <option> wewnątrz <datalist> powinien posiadać atrybut value określający wartość sugestii. Opcjonalnie można dodać atrybut label z krótszym opisem. Przykład użycia:

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


Kontekst HTML5

Poniższa tabela porządkuje kluczowe informacje o elemencie <datalist>:

Kompatybilność z przeglądarkami

Element <datalist> jest wspierany przez większość nowoczesnych przeglądarek. Zestawienie wsparcia wygląda następująco:

Starsze przeglądarki nie wyświetlą autouzupełniania opartego o <datalist>. W takim przypadku użytkownik wpisze wartość ręcznie, a formularz pozostanie w pełni używalny.

Obsługa starszych przeglądarek

Aby zapewnić kompatybilność wsteczną, możesz osadzić <select> wewnątrz <datalist>. Nowoczesne przeglądarki zignorują <select> i użyją sugestii z <datalist>, a starsze pokażą klasyczną listę rozwijalną. Oto schemat:

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


Zalety stosowania <datalist>

Najważniejsze korzyści ze stosowania <datalist> to:

• oszczędność czasu użytkownika – sugestie eliminują konieczność ręcznego wpisania pełnej wartości;
• poprawa doświadczenia użytkownika – szczególnie przydatne dla skomplikowanych danych (kody pocztowe, nazwy miast, województwa);
• elastyczność – użytkownik może wybrać sugestię lub wpisać własną wartość;
• brak wpływu na stare przeglądarki – element jest niewidoczny dla nieobsługujących go przeglądarek;
• łatwość implementacji – wymaga tylko kilku linii kodu.

Ograniczenia

Przed wdrożeniem warto uwzględnić następujące ograniczenia:

• słaba popularność – element nie jest powszechnie znany, co może prowadzić do jego niedostatecznego wykorzystania;
• wsparcie przeglądarek – starsze wersje przeglądarek go nie obsługują;
• brak stylizacji – brak możliwości zaawansowanego stylizowania listy sugestii poprzez CSS.