<datalist>

Тег datalist упрощает заполнение веб-форм, предоставляя пользователю список для выбора. Кроме предлагаемых вариантов для выбора, пользователь может ввести произвольный текст.

Элемент input с атрибутом list ссылается на тег datalist. Атрибут list должен иметь значение аналогично идентификатору тега datalist. Текст для выбора находится внутри тега datalist.

Демо

datalist input

Предоставить возможность пользователю сделать выбор из предлагаемого списка option и ввести произвольный текст.

Выбрать свой любимый фрукт:

<input type="text" value="" list="fruits" />
<datalist id="fruits">
  <option value="Яблоко"></option>
  <option value="Груша"></option>
  <option value="Айва"></option>
</datalist>

datalist select

Предоставить возможность пользователю выбрать вариант из списка select и ввести произвольный текст.


Выбрать свой любимый фрукт:

добавить свой фрукт:

<datalist id="fruits">
  Выберите свой любимый фрукт:
  <select id="fruits">
    <option value="Яблоко">Яблоко</option>
    <option value="Груша">Груша</option>
    <option value="Айва">Айва</option>
  </select>
добавить свой фрукт:
</datalist>
<input type="text" name="fruit" value="" list="fruits" />

Текст внутри тега datalist за исключением option будет скрыт. Убедитесь, что обработчик подхватывает fruit как параметр запроса.

datalist type=range

datalist и input[type=range] показывает индикатор рядом со слайдом.

Показывать индикаторы рядом со слайдом, DataList
Индикаторы рядом со слайдом
<input type="range" value="0" min="0" max="100" list="numbers" />
  <datalist id="numbers">
    <option>10</option>
    <option>15</option>
    <option>30</option>
    <option>50</option>
    <option>90</option>
  </datalist>

Перемещение ползунка слайдера на входе привязывается к каждому из пунктов, пользователи могут легко приспособиться к этим значениям.

datalist type=color

datalist и input[type=color] выбрать произвольный цвет из палитры без помощи плагинов JavaScript.

Произвольный цвет из палитры цветов DataList
Произвольный цвет из палитры
<input type="color" value="#000000" list="colors" />
  <datalist id="colors">
    <option>#ff0000</option>
    <option>#0000ff</option>
    <option>#00ff00</option>
    <option>#ffff00</option>
    <option>#00ffff</option>
  </datalist>

datalist и input[type=color] принимает только шестнадцатеричные значение цвета, например #ff0000.

Поддержка браузерами datalist

Таблица поддержки браузерами: “<datalist>”

54321
(0 голосов, в среднем: 0 из 5)