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>

数据列表选项

<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生活标准中找到了这个窍门：“每个选项元素是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"在元素失去焦点或用户按下Enter键后触发该事件。
• <datalist>跨浏览器的支持确实很差。显示所有可用选项的方法不一致，并且事情只会从那里变得更糟。

我认为最后一点确实是重要的。由于您将拥有更通用的自动完成后备广告，因此几乎没有理由去配置<datalist>。再加上任何体面的自动完成插入功能，将允许您设置样式显示选项的方式，而<datalist>事实并非如此。如果<datalist>接受<li>您可以随意操作已元素，那就太好了！但不是。

就我所知，<datalist>搜索也是从字符串开头开始的完全匹配。所以如果你有<option value="internet explorer">并且搜索了“ explorer”，那么您将不会获得任何结果。大多数自动完成插件会在文本的任何位置进行搜索。

我只是<datalist>在某些内部页面上用作快速懒惰的便捷帮助程序，我可以100％确信这些页面具有最新的Chrome或Firefox，并且不会尝试提交伪造的值。对于其他任何情况，<datalist>由于浏览器支持非常差，因此不建议使用。

数据列表本身包括自动完成和建议，它还可以允许用户输入建议中未定义的值。

“仅选择”为您提供了用户必须从中选择的预定义选项

数据列表是HTML5支持的浏览器中的新HTML标记。它呈现为带有一些选项列表的文本框。对于性别文本框示例，当您在文本框中键入“ M”或“ F”时，它将为您提供男，女选项。

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

要专门回答您的问题的一部分“是否存在使用其中一种更好的情况？”，请考虑包含重复部分的表格。如果重复部分包含许多select标签，则option必须为每个选择，每一行呈现。

在这种情况下，我会考虑datalist与with一起使用input，因为datalist可以将inputs 用于任意数量的s。这可能会节省服务器上的大量渲染时间，并且可以更好地扩展到任意数量的行。

我注意到数据列表中没有选定的功能。它仅给您选择，但没有默认选项。您也无法在下一页上显示所选的选项。

select和之间还有另一个重要区别datalist。这是浏览器支持因素。

与数据列表相比，浏览器广泛支持select。请查看此页面以获取完整的浏览器对数据列表的支持-

数据列表浏览器支持

有效支持所有浏览器（自IE6 +，Firefox 2 +，Chrome 1+等以来）的select选项

它与选择类似，但是数据列表具有其他功能，例如自动建议。您甚至可以在键入时输入和查看建议。

用户还将能够写出列表中没有的项目。