HTML Предопределенные варианты ввода: Функция автозаполнения

Введение

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/FormsandInputGroup(["Forms and Input"]) html(("HTML")) -.-> html/AdvancedElementsGroup(["Advanced Elements"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/FormsandInputGroup -.-> html/forms("Form Elements") html/FormsandInputGroup -.-> html/form_access("Accessibility in Forms") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") html/AdvancedElementsGroup -.-> html/custom_attr("Custom Data Attributes") subgraph Lab Skills html/basic_elems -.-> lab-70732{{"HTML Предопределенные варианты ввода"}} html/forms -.-> lab-70732{{"HTML Предопределенные варианты ввода"}} html/form_access -.-> lab-70732{{"HTML Предопределенные варианты ввода"}} html/inter_elems -.-> lab-70732{{"HTML Предопределенные варианты ввода"}} html/custom_attr -.-> lab-70732{{"HTML Предопределенные варианты ввода"}} end

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

Создайте 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 позволяет пользователям выбирать из списка предварительно определенных вариантов, а также предоставляет возможность вводить значения вне предварительно определенных вариантов, если необходимо.