Co to jest `datalist` w HTML?

Element datalist w HTML umożliwia dodanie do pola formularza (najczęściej <input>) listy sugerowanych wartości, z których użytkownik może wybrać podczas wpisywania tekstu. Tworzy więc funkcję podpowiadania i autouzupełniania danych, ułatwiając i przyspieszając wypełnianie formularzy.

Czym dokładnie jest <datalist>?

• Definicja – <datalist> to niewidoczny na stronie element, który zawiera zbiór dostępnych opcji (<option>), powiązany z polem <input>;
• Powiązanie – powiązanie odbywa się przez atrybuty id (dla <datalist>) oraz list (dla <input>). Ich wartości muszą być identyczne, co umożliwia przeglądarce rozpoznanie, że podpowiedzi są z tego właśnie zestawu;
• Uniwersalność – użytkownik może wybrać wartość z podpowiedzi lub wpisać własny, nieograniczony tekst;
• Wygląd – podpowiedzi są widoczne w formie rozwijanej listy przy wpisywaniu znaku/textu w polu <input>.

Podstawowy przykład użycia

<label for="city">Miasto:</label>
<input type="text" id="city" name="city" list="city-list">
<datalist id="city-list">
  <option value="Warszawa">
  <option value="Kraków">
  <option value="Gdańsk">
  <option value="Wrocław">
  <option value="Poznań">
</datalist>

Jak to działa?

• Po kliknięciu lub rozpoczęciu wpisywania w polu „Miasto” wyświetli się lista wcześniej zdefiniowanych opcji,
• użytkownik może wybrać jedną z podpowiedzi, ale nadal ma możliwość wpisania dowolnej innej nazwy miasta.

Zaawansowane zastosowania i dobre praktyki

Lista przeglądarek

Pole z podpowiedziami dla wyboru ulubionej przeglądarki:

<label for="browser">Wybierz przeglądarkę:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

Podpowiedzi dla pól adresowych

Pomoc w autouzupełnianiu nazwy ulicy lub firmy:

<label for="company">Firma:</label>
<input list="companies" id="company" name="company">
<datalist id="companies">
  <option value="Google">
  <option value="Microsoft">
  <option value="Apple">
  <option value="Amazon">
</datalist>

Dynamiczne generowanie <datalist> w JavaScript

Można użyć JavaScript, aby dynamicznie dodać opcje na podstawie np. danych z serwera lub API.

Cechy i ograniczenia <datalist>

• Nie waliduje wartości – nawet jeśli dostępne są tylko niektóre podpowiedzi, użytkownik może wpisać dowolny ciąg znaków;
• Obsługa przez przeglądarki – element jest obsługiwany przez większość nowoczesnych przeglądarek, choć nie wszystkie style podpowiedzi są identyczne;
• Możliwość użycia tylko w połączeniu z <input> o typie tekstowym (np. text, search, email, url, ale nie number, date itd.);
• Brak graficznej widoczności <datalist> – jest to element tylko dla przeglądarki, nie dla użytkownika (nie generuje DOM widocznego w UI).

Zastosowania praktyczne <datalist>

• Formularze logowania i rejestracji – sugerowane domeny e-mail, nazwy użytkowników,
• aplikacje e-commerce – szybkie wyszukiwanie produktów lub kategorii,
• systemy rezerwacji – wybór miasta, typu pojazdu, kategorii usług.

Podsumowanie

Element <datalist> pozwala wzbogacić formularze o wygodne podpowiedzi bez ograniczania swobody użytkownika. Jest to narzędzie lekkie, proste w użyciu i znacząco poprawiające doświadczenia podczas wprowadzania danych. Warto z niego korzystać wszędzie tam, gdzie wybór z listy jest pomocny, ale nie chcemy „zamrażać” wartości, jak w przypadku <select>.