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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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