Поля с автозаполнением (datalist)

Тренажер по HTML для пользователей с начальным уровнем подготовки.

Опубликовано 04.04.2025
Просмотры 21
Автор
Рек. время прохождения 4 минуты
Упражнений 7
Комментарии 0
Тренажер HTML
В этой серии заданий мы научимся делать веб-формы удобнее с помощью одного простого, но мощного элемента. Представь, что пользователь начинает вводить текст в поле, а браузер тут же предлагает ему список подходящих вариантов, как в поиске. Это не только ускоряет заполнение, но и снижает количество опечаток. Именно для этого и существует тег `<datalist>`. Он позволяет создать выпадающий список с подсказками для поля ввода, при этом не ограничивая пользователя — он всегда может ввести своё собственное значение, если ни один из предложенных вариантов не подходит. Это делает его отличным инструментом для улучшения UX ваших форм. Пройди эти задания, чтобы освоить все тонкости работы с автозаполнением!
Список тем

Создание контейнера для подсказок

id: 37857_html_datalist_01

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

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  color: #333;
}
.form-container {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
HTML
<div class="form-container">
  <label for="browser-choice">Выберите браузер:</label>
  <input list="browsers" id="browser-choice" name="browser" type="text">

  <input1 input2="browsers">
    <!-- Тут будут варианты -->
  </input1>
</div>
Чтобы создать список подсказок, используется тег `<datalist>`. Чтобы связать его с полем ввода, у `<datalist>` должен быть атрибут `id` с уникальным значением.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Добавление вариантов подсказок

id: 37857_html_datalist_02

Пустой список подсказок бесполезен. Давайте добавим в наш `<datalist>` несколько вариантов. Для этого используется тот же тег, что и в выпадающих списках `<select>`, а текст подсказки задается через специальный атрибут.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  color: #333;
}
.form-container {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
HTML
<div class="form-container">
  <label for="browser-choice">Выберите браузер:</label>
  <input list="browsers" id="browser-choice" name="browser" type="text">

  <datalist id="browsers">
    <input1 input2="Chrome">
    <input3 value="Firefox">
    <option input4="Edge">
  </datalist>
</div>
Внутри `<datalist>` размещаются теги `<option>`. Текст каждой подсказки указывается в атрибуте `value`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Связывание поля ввода и списка

id: 37857_html_datalist_03

Теперь, когда у нас есть и поле ввода, и список подсказок, их нужно соединить. Это делается с помощью двух атрибутов: один у тега `<input>`, другой — у `<datalist>`. Значения этих атрибутов должны в точности совпадать.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  color: #333;
}
.form-container {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
HTML
<div class="form-container">
  <label for="country-choice">Выберите страну:</label>
  <input type="text" id="country-choice" name="country" input1="countries-list">

  <datalist input2="countries-list">
    <option value="Австралия">
    <option value="Бразилия">
    <option value="Канада">
  </datalist>
</div>
Чтобы связать поле ввода со списком, у тега `<input>` должен быть атрибут `list`, а у `<datalist>` — атрибут `id`. Значение `list` должно быть таким же, как значение `id`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Сборка полной структуры

id: 37857_html_datalist_04

Давайте закрепим знания. Перед вами почти пустая форма для выбора среды разработки. Ваша задача — добавить поле ввода, связать его со списком подсказок и создать сам список с одним вариантом.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  color: #333;
}
.form-container {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
HTML
<div class="form-container">
  <label for="ide-choice">Среда разработки:</label>
  <input type="text" id="ide-choice" name="ide" input1="ides">

  <input2 input3="ides">
    <input4 value="VS Code">
    <option value="WebStorm">
  </input2>
</div>
Вам нужно добавить тег `<input>` с атрибутом `list`. Затем создать тег `<datalist>` с соответствующим `id`. Внутри `<datalist>` поместите тег `<option>` с атрибутом `value`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Datalist для числовых значений

id: 37857_html_datalist_05

Подсказки могут содержать не только текст, но и числа. Давайте создадим поле для выбора размера шрифта с несколькими предопределенными вариантами. Добавьте недостающий атрибут `value` к одному из вариантов.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  color: #333;
}
.form-container {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
HTML
<div class="form-container">
  <label for="font-size">Размер шрифта (px):</label>
  <input type="text" list="font-sizes" id="font-size" name="font-size">

  <datalist id="font-sizes">
    <option input1="12">
    <option value="14">
    <option value="16">
    <option value="18">
  </datalist>
</div>
Для каждого тега `<option>` внутри `<datalist>` должен быть атрибут `value`, который и определяет, какой текст будет показан в качестве подсказки.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Использование с другими типами полей

id: 37857_html_datalist_06

Тег `<datalist>` работает не только с текстовыми полями. Его можно использовать, например, с ползунком (`<input type="range">`), чтобы добавить на него метки. Свяжите ползунок с уже готовым списком меток.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  color: #333;
}
.form-container {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
input[type="range"] {
  width: 100%;
  margin-top: 10px;
}
.range-labels {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #666;
  padding: 0 5px;
}
HTML
<div class="form-container">
  <label for="rating">Оценка (от 0 до 100):</label>
  <input type="range" min="0" max="100" step="25" id="rating" input1="marks">

  <input2 id="marks">
    <option value="0">
    <option value="25">
    <option value="50">
    <option value="75">
    <option value="100">
  </input2>
  <div class="range-labels"><span>0</span><span>100</span></div>
</div>
Принцип тот же: используйте атрибут `list` у тега `<input>` и `id` у тега `<datalist>` с одинаковыми значениями, чтобы установить связь.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку

Практический пример: выбор языка

id: 37857_html_datalist_07

Заключительное задание. Перед вами форма для выбора любимого языка программирования с большим списком вариантов. Ваша задача — правильно "подключить" этот список к полю ввода, используя уже изученные атрибуты.

CSS
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #f0f2f5;
  padding: 20px;
  color: #333;
}
.form-container {
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
}
input[type="text"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 16px;
}
input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
HTML
<div class="form-container">
  <label for="lang">Любимый язык программирования:</label>
  <input type="text" id="lang" name="lang" input1="languages">

  <datalist input2="languages">
    <option value="JavaScript">
    <option value="Python">
    <option value="Java">
    <option value="C#">
    <option value="PHP">
    <option value="TypeScript">
    <option value="Rust">
    <option value="Go">
  </datalist>
</div>
Убедитесь, что у тега `<input>` есть атрибут `list`, а у тега `<datalist>` — `id`. Их значения должны полностью совпадать. В данном случае, используйте значение `languages`.
Заполнить ответами все поля
Результат
Сообщения
Выполнить
Показать подсказку
Предыдущая темаСледующая тема
НайтиКурс.Ру