<datalist>
Lista podpowiedzi dla pola `<input>`. Można wybrać propozycję albo wpisać własną wartość.
- Wyświetlanie
- none
- Znacznik zamykający
- Wymagany
- Dozwolona zawartość
- Elementy
<option>
Przykład
#<label for="city">Miasto</label>
<input id="city" name="city" list="cities" placeholder="Zacznij pisać…">
<datalist id="cities">
<option value="Gdańsk">
<option value="Kraków">
<option value="Poznań">
<option value="Warszawa">
<option value="Wrocław">
</datalist>Definicja i zastosowanie
#Element <datalist> zawiera zestaw proponowanych wartości dla pola <input>. Łączysz je, podając id listy w atrybucie list pola. Podczas pisania przeglądarka pokazuje pasujące propozycje, podobnie jak wyszukiwarka z autouzupełnianiem.
W odróżnieniu od <select> lista nie ogranicza wyboru. Użytkownik może wpisać cokolwiek, a podpowiedzi tylko przyspieszają pisanie. Dlatego <datalist> sprawdza się przy polach typu „Miasto” czy „Ulubiony język”, gdzie są popularne odpowiedzi, ale lista nie jest zamknięta.
Sam element nie wyświetla się na stronie. Podpowiedzi działają z polami tekstowymi, a także z typami takimi jak email, url, number czy range, choć ich wygląd zależy od przeglądarki. Firefox na Androidzie w ogóle ich nie pokazuje, więc pole musi być wygodne także bez podpowiedzi.
Składnia
#<input list="id-listy">
<datalist id="id-listy">
<option value="…">
</datalist>Atrybuty
#Ten element nie ma własnych atrybutów. Obsługuje atrybuty globalne, takie jak class, id czy hidden.
Obsługa przeglądarek
#Ograniczona obsługa
Nie wszystkie przeglądarki to obsługują. Sprawdź obsługę, zanim użyjesz tego w produkcji.
Dobre praktyki
#- Nie używaj
<datalist>tam, gdzie wolno wybrać tylko jedną z podanych wartości. Wtedy lepszy jest<select>, a serwer i tak musi sprawdzić wartość. - Opcja może mieć też atrybut
label, który część przeglądarek pokazuje obok wartości jako opis podpowiedzi.
Powiązane hasła
#- <input>Pole formularza: tekst, e-mail, hasło, liczba, data, suwak, pole wyboru, plik i wiele innych.
- <option>Pojedyncza opcja listy `<select>` albo podpowiedź w `<datalist>`.
- <select>Rozwijana lista, z której użytkownik wybiera jedną lub kilka opcji.
- <label>Etykieta pola formularza. Kliknięcie etykiety przenosi kursor do pola.
Widzisz błąd albo brakuje przykładu? Napisz do nas.