HTML Предопределенные варианты ввода

Введение

Тег HTML datalist используется для предоставления списка предварительно определенных вариантов, которые появляются, когда пользователь вводит текст в поле ввода. В этом практическом занятии вы научитесь использовать тег datalist для включения функции автозаполнения на форме.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Добавление поля ввода

Создайте HTML-файл с именем "index.html".

Добавьте поле ввода в ваш HTML-файл с использованием тега <input>.

<input type="text" id="car-brand" />

Создание datalist

Создайте datalist, используя тег <datalist> и атрибут id.

<datalist id="car-brands"> </datalist>

Добавление вариантов в datalist

Добавьте несколько вариантов в datalist, используя тег <option>.

<datalist id="car-brands">
  <option value="Toyota"></option>
  <option value="Honda"></option>
  <option value="BMW"></option>
  <option value="Ford"></option>
  <option value="Tesla"></option>
</datalist>

Связь поля ввода с datalist

Свяжите поле ввода с datalist, используя атрибут list и установив его значение равным ID datalist.

<input type="text" id="car-brand" list="car-brands" />

Сохраните изменения и протестируйте функцию автозаполнения на форме с несколькими марками автомобилей.

Резюме

Следуя этим простым шагам, вы можете реализовать тег datalist в своем HTML-коде, чтобы обеспечить функцию автозаполнения на форме. Тег datalist позволяет пользователям выбирать из списка предварительно определенных вариантов, а также предоставляет возможность вводить значения вне предварительно определенных вариантов, если необходимо.