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

Question

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

Answer 1

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

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

Редактировать 2: Нашел этот фрагмент в HTML Living Standard : "Каждый элемент option, являющийся потомком элемента списка данных... представляет предложение. "

Answer 2

С технической точки зрения они совершенно разные. <datalist> - абстрактный контейнер опций для других элементов. В вашем случае вы использовали его с <input type="text", но вы также можете использовать его с диапазонами, цветами, датами и т. Д. http://demo.agektmr.com/datalist/

Если использовать его с вводом текста в качестве типа автозаполнения, тогда возникает вопрос: лучше ли использовать ввод текста в произвольной форме или заранее определенный список параметров? В этом случае я думаю, что ответ немного более очевиден.

Если мы сконцентрируемся на использовании <datalist> в качестве списка опций для текстового поля, то вот некоторые конкретные различия между ним и полем выбора:

• A <datalist> содержит одну строку для отображения метки и отправки. Поле выбора может иметь другое значение отправки и метку дисплея <option value='ie'>Internet Explorer</option>.
• A <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> из-за очень плохой поддержки браузера.

Answer 3

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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

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

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

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

Answer 7

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

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

Answer 8

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