Formularz HTML - element "datalist"

Za pomocą elementu datalist oraz elementów option możemy utworzyć predefiniowaną listę opcji wyboru.

Przykład:

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

Naszą przykładową predefiniowaną listę opcji wyboru możemy powiązać z interesującym nas elementem input za pomocą jego atrybutu list.

Jako wartość atrybutu list elementu input należy podać wartość atrybutu id interesującego nas elementu datalist.

Przykład:

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

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

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>

Rezultat:

Od tej pory, gdy użytkownik odwiedzający nasz dokument HTML zechce wprowadzić nazwę koloru do naszego przykładowego elementu input, wtedy dla wspomnianego użytkownika przeglądarka internetowa wyświetli przykładową predefiniowaną listę opcji wyboru zawierającą różne nazwy kolorów, z których wspomniany użytkownik być może zechce wybrać interesujący go kolor.