Element <datalist> (Sugestie dla pól input)

Lekcja 8.9: Element <datalist> (Sugestie dla pól input)

Strona główna > Rozdział 8: Formularze > Element <datalist>

Ułatwianie wprowadzania danych: Sugestie

Czasami chcemy ułatwić użytkownikom wypełnianie pól tekstowych, podpowiadając im możliwe wartości, ale jednocześnie pozwalając na wpisanie własnej, niestandardowej odpowiedzi. Do tego celu służy element <datalist> wprowadzony w HTML5.

Element <datalist>

Element <datalist> zawiera zestaw predefiniowanych opcji (<option>), które mają być sugerowane użytkownikowi podczas wpisywania tekstu w powiązanym polu <input>.

Sam element <datalist> nie jest wyświetlany na stronie.
Musi posiadać atrybut id, aby można było go powiązać z polem <input>.
Wewnątrz <datalist> umieszcza się znaczniki <option>, podobnie jak w elemencie <select>.

Powiązanie <datalist> z <input>

Aby powiązać listę sugestii z konkretnym polem tekstowym, należy:

Nadać elementowi <datalist> unikalny atrybut id.
Dodać do znacznika <input> atrybut list, którego wartość jest identyczna jak id elementu <datalist>.

Pole <input>, z którym powiązano <datalist>, powinno być typu, który pozwala na wprowadzanie tekstu (np. text, search, url, email, tel).

Znacznik <option> wewnątrz <datalist>

Podobnie jak w <select>, każda sugestia jest definiowana przez znacznik <option>.

Kluczowy jest atrybut value - to jego wartość będzie sugerowana i wstawiona do pola <input> po wybraniu sugestii.
Tekst umieszczony między <option> a </option> może być również wyświetlany przez niektóre przeglądarki jako dodatkowy opis sugestii, ale nie jest on wstawiany do pola <input>. Jeśli tekst nie jest podany, przeglądarka zazwyczaj wyświetla wartość z atrybutu value.

Przykład użycia <datalist>:

<form action="/submit" method="get">
  <label for="przegladarka">Wpisz lub wybierz ulubioną przeglądarkę:</label>
  <input list="lista-przegladarek" id="przegladarka" name="browser">
  
  <datalist id="lista-przegladarek">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
    <option value="Opera">
    <option value="Brave">
  </datalist>
  
  <button type="submit">Wyślij</button>
</form>

W tym przykładzie, gdy użytkownik zacznie pisać w polu "przegladarka", przeglądarka wyświetli pasujące opcje z listy lista-przegladarek. Użytkownik może wybrać jedną z sugestii lub wpisać własną nazwę.

Przykład z tekstem opisującym w <option>:

Niektóre przeglądarki mogą wyświetlić tekst zawarty wewnątrz <option> jako dodatkową informację.

<label for="kolor">Wybierz kolor (lub wpisz kod):</label>
<input list="lista-kolorow" id="kolor" name="color_code">

<datalist id="lista-kolorow">
  <option value="#ff0000">Czerwony</option>
  <option value="#00ff00">Zielony</option>
  <option value="#0000ff">Niebieski</option>
  <option value="#ffff00">Żółty</option>
</datalist>

Po wybraniu np. "Zielony" z listy, do pola <input> zostanie wstawiona wartość #00ff00.

Różnice między <datalist> a <select>

<select>: Wymusza wybór tylko spośród predefiniowanych opcji. Użytkownik nie może wpisać własnej wartości.
<datalist>: Dostarcza sugestii dla pola <input>. Użytkownik może wybrać sugestię lub wpisać dowolną inną wartość.

Wybór między nimi zależy od tego, czy chcemy ograniczyć użytkownika do konkretnych opcji (<select>), czy tylko mu podpowiedzieć, ale pozwolić na swobodę (<datalist>).

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Stwórz pole tekstowe do wpisania kraju. Dodaj do niego element <datalist> z kilkoma sugestiami krajów (np. Polska, Niemcy, Francja, Hiszpania). Powiąż pole <input> z <datalist>.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Datalist - Przykład</title>
    <style>
        label { display: block; margin-top: 10px; }
        input { width: 90%; max-width: 300px; padding: 8px; margin-top: 5px; border: 1px solid #ccc; }
        button { margin-top: 15px; padding: 10px 15px; }
    </style>
</head>
<body>
    <h1>Wybierz kraj</h1>
    
    <form action="/submit" method="get">
        <div>
            <label for="kraj-input">Wpisz lub wybierz kraj:</label>
            <input list="lista-krajow" id="kraj-input" name="kraj">
        </div>
        
        <datalist id="lista-krajow">
            <option value="Polska">
            <option value="Niemcy">
            <option value="Francja">
            <option value="Hiszpania">
            <option value="Włochy">
            <option value="Wielka Brytania">
        </datalist>
        
        <button type="submit">Wyślij</button>
    </form>

</body>
</html>

Dodatkowe zadania do samodzielnego wykonania:

Stwórz pole <input type="email"> i dodaj do niego <datalist> z kilkoma przykładowymi adresami e-mail.
Dodaj do opcji w <datalist> z krajami tekst opisowy (np. <option value="PL">Polska</option>) i zaobserwuj, jak wyświetlają się sugestie w Twojej przeglądarce.
Spróbuj powiązać <datalist> z polem <input type="number"> i sprawdź, czy sugestie działają.

Najczęściej zadawane pytania

Do czego służy element <datalist>?

Element <datalist> dostarcza listę predefiniowanych sugestii dla pola <input>. Ułatwia użytkownikowi wprowadzanie danych, podpowiadając możliwe wartości, ale pozwala też wpisać własną.

Jak powiązać <datalist> z polem <input>?

Nadaj elementowi <datalist> unikalny atrybut id. Następnie dodaj do znacznika <input> atrybut list, którego wartość jest identyczna jak id elementu <datalist>.

Jakie znaczniki umieszcza się wewnątrz <datalist>?

Wewnątrz <datalist> umieszcza się znaczniki <option>, podobnie jak w <select>. Atrybut value znacznika <option> określa sugerowaną wartość.

Czym <datalist> różni się od <select>?

<select> wymusza wybór tylko z listy, użytkownik nie może wpisać nic innego. <datalist> tylko sugeruje opcje dla pola <input>, użytkownik może wybrać sugestię lub wpisać własną wartość.

Czy <datalist> działa ze wszystkimi typami <input>?

Najlepiej działa z typami pozwalającymi na wprowadzanie tekstu (text, search, email, url, tel). Wsparcie dla innych typów (np. number, date) może być ograniczone lub nieobecne w niektórych przeglądarkach.