Frontend Portal

Автозаполнение инпута



HTML-элемент <datalist> содержит набор опций (<option>), доступных для выбора. Выбранное значение будет установлено для элемента <input>



Пример:

<label for="my-browser">Выберите браузер из списка:</label>

  <input type="text" list="browsers" id="my-browser" name="my-browser">



  <datalist id="browsers">

    <option value="Chrome">

    <option value="Firefox">

    <option value="Yandex Browser">

    <option value="Opera">

    <option value="Safari">

    <option value="Microsoft Edge">

  </datalist>

Различия между <select> и <datalist>



Кроме функции автодополнения элемента <datalist>, основное отличие между <select> и этим тегом в том, что в элементе <select> нельзя выбрать или указать значение не из списка предлагаемых



👉 @FrontendPortal | #HTML