HTML-форма: Select-Option vs Datalist-Option

Мені було цікаво, чим відрізняються між Select-Option та Datalist-Option. Чи є ситуація, в якій було б краще використовувати те чи інше? Приклад кожного наступного:

Вибір-варіант

<select name="browser">
<option value="firefox">Firefox</option>
<option value="ie">IE</option>
<option value="chrome">Chrome</option>
<option value="opera">Opera</option>
<option value="safari">Safari</option>
</select>

Даталіст-Варіант

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

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

Редагувати 1: Отже, який ви використовуєте, залежить від ваших вимог. Якщо користувач повинен ввести один із ваших варіантів, використовуйте selectелемент. Якщо у використанні можна ввести що завгодно, використовуйте datalistелемент.

Редагувати 2: Знайдено цей лапок у HTML Living Standard : "Кожен елемент параметра, який є нащадком даталістичного елемента ... являє собою пропозицію."

З технічної точки зору вони зовсім інші. <datalist>є абстрактним контейнером варіантів для інших елементів. У вашому випадку ви використовували його, <input type="text"але ви також можете використовувати його з діапазонами, кольорами, датами тощо. Http://demo.agektmr.com/datalist/

Якщо ви використовуєте його з введенням тексту, як тип автозаповнення, то справді виникає питання: чи краще використовувати введення тексту у вільній формі або заздалегідь визначений список варіантів? У цьому випадку я думаю, що відповідь трохи очевидніша.

Якщо ми зосередимось на використанні <datalist>в якості списку параметрів для текстового поля, то ось деякі конкретні відмінності між цим і полем вибору:

• <datalist>Подаються текстове поле має один рядок , як для етикетки дисплея і натисніть кнопку. Поле вибору може мати інше значення подання та мітку відображення <option value='ie'>Internet Explorer</option>.
• <datalist>Подається текстове поле не підтримує <optgroup>тег для організації відображення.
• Ви не можете обмежувати користувача списком параметрів у <datalist>подібному варіанті <select>.
• OnChange подія працює по- іншому. На <select>елементі подія onchange запускається негайно при зміні, тоді як при <input type="text"події запускається після того, як елемент втрачає фокус або користувач натискає.
• <datalist>має дійсно непомітну підтримку в браузерах Спосіб показу всіх доступних варіантів є непослідовним, і звідти все тільки погіршується.

Останній пункт, на мою думку, дійсно великий. Оскільки у вас буде більш універсальний запас автозаповнення, то майже не існує причин переживати проблеми з налаштуванням <datalist>. Плюс будь-яке пристойне підключення до автозаповнення дозволить створити способи стилю відображення ваших параметрів, що <datalist>не робить. Якби <datalist>прийняті <li>елементи, якими ви могли б маніпулювати, як завгодно, це було б справді чудово! Але не.

Крім того, наскільки я можу сказати, <datalist>пошук є точною відповідністю від початку рядка. Тож якби ви мали <option value="internet explorer">і шукали "explorer", ви не отримали б результатів. Більшість плагінів для автозаповнення здійснюватимуть пошук у будь-якому місці тексту.

Я використовую <datalist>лише швидкий і ледачий помічник зручності для деяких внутрішніх сторінок, на яких я зі 100% впевненістю знаю, що користувачі мають найновіший Chrome або Firefox, і не намагатимуться надсилати фальшиві значення. У будь-якому іншому випадку важко рекомендувати використання <datalist>через дуже погану підтримку браузера.

Datalist включає автозаповнення та пропозиції на самому собі, він також може дозволити користувачеві ввести значення, яке не визначене в пропозиціях.

Вибір дає лише попередньо визначені параметри, з яких користувач має обрати

Список даних - це новий тег HTML у веб-переглядачах, що підтримуються HTML5. Він відображається як текстове поле з деяким списком параметрів. Для прикладу для гендерного текстового поля він надасть вам параметри як Чоловік-самка, коли ви введете "M" або "F" у текстове поле.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>

Щоб конкретно відповісти на частину вашого питання "Чи є ситуація, в якій було б краще використовувати те чи інше?", Розгляньте форму з повторюваними розділами. Якщо розділ, що повторюється, містить багато selectтегів, то options повинен бути відображений для кожного вибору, для кожного рядка.

У такому випадку, я б розглянути можливість використання datalistз input, так само datalistможе бути використаний для будь-якого числа inputс. Це потенційно може зекономити велику кількість часу надання сервера та значно покращити будь-яку кількість рядків.

Я помітив, що у даталіста немає обраної функції. Це дає лише вибір, але не може мати варіант за замовчуванням. Ви також не можете відобразити вибрану опцію на наступній сторінці.

Є ще одна важлива різниця між selectі datalist. Тут з'являється фактор підтримки браузера.

select широко підтримується браузерами порівняно з даталістичним. Перегляньте цю сторінку, щоб отримати повну підтримку браузера datalist--

Підтримка браузера Datalist

Де вибір підтримується в усіх браузерах (починаючи з IE6 +, Firefox 2+, Chrome 1+ тощо)

Його схоже на вибір, але даталіст має додаткові функціональні можливості, такі як автоматична пропозиція. Ви навіть можете вводити та бачити пропозиції під час і під час введення.

Користувач також зможе писати елементи, яких немає в списку.