Форма HTML: выбор-опция против опции-списка данных

136

Мне было интересно, в чем различия между 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>

DataList-Option

<input type=text list=browsers>
<datalist id=browsers>
  <option value="Firefox">
  <option value="IE">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
user928984
источник
11
Потому что HTML5 определенно говорит, что атрибуты без кавычек
james.garriss
1
Кто-нибудь знает, почему мы не закрываем optionтег в параметре datalist? Возвышенное, кажется, хочет
Джонни Мец
1
@ johnny Metz Вы можете закрыть тег, но он может быть самозакрывающимся, вы также можете сделать что-то вроде этого: code <input list = "browsers" name = "browser"> <datalist id = "browsers"> <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> </ datalist> codeРезультат странный. Специалисты по печати печатают значение в списке. Это значение затем становится значением поля ввода.
Сара М Джайлс
3
@JohnnyMetz, HTML 5 был частично реакцией на XHTML. Для некоторых элементов, например option, нет необходимости иметь закрывающий тег или быть самозакрывающимся. HTML 5! = XHTML.
james.garriss
2
В спецификации сказано: «Начальный и конечный теги некоторых нормальных элементов могут быть опущены». В нем также говорится: «Конечный тег элемента option может быть опущен, если за элементом option сразу следует другой элемент option, или если за ним сразу следует элемент optgroup, или если в родительском элементе больше нет содержимого». w3.org/TR/html/syntax.html#optional-tags
james.garriss

Ответы:

180

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

Редактировать 1: То, какой вы используете, зависит от ваших требований. Если пользователь должен ввести один из ваших вариантов, используйте selectэлемент. Если использование может ввести что угодно, используйте datalistэлемент.

Редактировать 2: Нашел этот кусочек в HTML Living Standard : «Каждый элемент option, являющийся потомком элемента datalist ..., представляет предложение».

james.garriss
источник
Кроме того, он имеет в основном [частичную поддержку] (( caniuse.com/#feat=datalist ) в других браузерах, с ошибками, такими как длинные списки данных, которые невозможно прокрутить и т. Д.
Govind Rai
В chrome на данный момент, если данные вводятся (вводятся), это запрещает нажатие стрелки. Это, вероятно, не идеально в большинстве случаев.
Дэвид
66

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

mastaBlasta
источник
3
Отличный ответ !! Не могли бы вы объяснить свою вторую пулю? Что вы подразумеваете под «группами опций для организации отображения»? Спасибо.
Говинд Рай
afaik (в 2019 году в Chrome и Firefox) <datalist> сопоставляет инфиксы (а не только префиксы). так что «печатая» re »предлагает и« Firefox »и« Internet Explorer ».
Сэм Boosalis
@GovindRai I при беглом поиске «элемента optgroup» возвращает эту страницу из всегда полезной MDN с дополнительной информацией (и примерами): developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
TylerH
Я тестировал под Firefox 66 и Chrome 73 - на самом деле, метки списка данных совпадают где угодно, например, если ваш каталог содержит названия стран, «ted» будет соответствовать «United States» и «United Kingdom».
Błotosmętek
5

Datalist изначально включает автозаполнение и предложения, а также позволяет пользователю вводить значение, которое не определено в предложениях.

Выбор только дает вам предопределенные параметры, из которых пользователь должен выбрать

user3167654
источник
2

Data List - это новый тег HTML в браузерах, поддерживаемых HTML5. Он отображается как текстовое поле с некоторым списком параметров. Например, в текстовом поле «Пример для пола» вам будет предложено выбрать «Мужской женский», когда вы вводите «M» или «F» в текстовом поле.

<input list="Gender">
<datalist id="Gender">
  <option value="Male">
  <option value="Female> 
</datalist>
Дипак
источник
5
Верно, но он дает одну приятную, новую информацию, а именно, что ввод первой буквы выберет соответствующие элементы в списке.
james.garriss
1

Чтобы конкретно ответить на часть вашего вопроса «Есть ли ситуации, в которых было бы лучше использовать один или другой?», Рассмотрите форму с повторяющимися разделами. Если повторяющаяся секция содержит много selectтегов, тогда options должен быть представлен для каждого выбора, для каждой строки.

В таком случае я хотел бы рассмотреть возможность использования datalistс input, потому что то же самое datalistможно использовать для любого числа inputs. Это может потенциально сэкономить большое количество времени рендеринга на сервере и значительно лучше масштабировать до любого числа строк.

Брюс Пирсон
источник
Если вы не собираетесь беспокоиться о предоставлении пользователю опций на выбор, зачем использовать список данных? Просто используйте вместо этого текстовое поле.
james.garriss
0

Я заметил, что в списке данных нет выбранной функции. Это только дает вам выбор, но не может иметь вариант по умолчанию. Вы не можете показать выбранный вариант на следующей странице.

Вэйхуэй Го
источник
Эквивалентом для ввода данных плюс список данных будет установка значения = "(опция по умолчанию)" для самого ввода. Для ввода с type = "text" этот текст будет отображаться по умолчанию, но будет редактируемым.
Бемисава
0

Есть еще одно важное различие между selectи datalist. Здесь идет фактор поддержки браузера.

Выбор широко поддерживается браузерами по сравнению с даталистом. Пожалуйста, посмотрите на эту страницу для полной поддержки браузером datalist--

Поддержка браузера Datalist

Где выбор поддерживается практически во всех браузерах (начиная с IE6 +, Firefox 2+, Chrome 1+ и т. Д.)

неофит
источник
0

Это похоже на выбор, но у datalist есть дополнительные функции, такие как автоматическое предложение. Вы даже можете печатать и видеть предложения, как и когда вы печатаете.

Пользователь также сможет писать элементы, которых нет в списке.

Viyaan Jhiingade
источник