Мне было интересно, в чем различия между 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>
html
html-select
forms
html-datalist
user928984
источник
источник
option
тег в параметре datalist? Возвышенное, кажется, хочет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
Результат странный. Специалисты по печати печатают значение в списке. Это значение затем становится значением поля ввода.option
, нет необходимости иметь закрывающий тег или быть самозакрывающимся. HTML 5! = XHTML.Ответы:
Думайте об этом как о разнице между требованием и предложением. Для
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>
.<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» в текстовом поле.
источник
Чтобы конкретно ответить на часть вашего вопроса «Есть ли ситуации, в которых было бы лучше использовать один или другой?», Рассмотрите форму с повторяющимися разделами. Если повторяющаяся секция содержит много
select
тегов, тогдаoption
s должен быть представлен для каждого выбора, для каждой строки.В таком случае я хотел бы рассмотреть возможность использования
datalist
сinput
, потому что то же самоеdatalist
можно использовать для любого числаinput
s. Это может потенциально сэкономить большое количество времени рендеринга на сервере и значительно лучше масштабировать до любого числа строк.источник
Я заметил, что в списке данных нет выбранной функции. Это только дает вам выбор, но не может иметь вариант по умолчанию. Вы не можете показать выбранный вариант на следующей странице.
источник
Есть еще одно важное различие между
select
иdatalist
. Здесь идет фактор поддержки браузера.Выбор широко поддерживается браузерами по сравнению с даталистом. Пожалуйста, посмотрите на эту страницу для полной поддержки браузером datalist--
Поддержка браузера Datalist
Где выбор поддерживается практически во всех браузерах (начиная с IE6 +, Firefox 2+, Chrome 1+ и т. Д.)
источник
Это похоже на выбор, но у datalist есть дополнительные функции, такие как автоматическое предложение. Вы даже можете печатать и видеть предложения, как и когда вы печатаете.
Пользователь также сможет писать элементы, которых нет в списке.
источник