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>

数据列表选项

<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 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

将其视为要求和建议之间的区别。对于 select 元素，用户需要选择您提供的选项之一。对于 datalist 元素，建议用户选择您提供的选项之一，但他实际上可以在输入中输入他想要的任何内容。

编辑 1：因此，您使用哪一个取决于您的要求。如果用户 必须 输入您的选择之一，请使用 select 元素。如果使用可以输入任何内容，请使用 datalist 元素。

编辑 2：在 HTML Living Standard 中找到了这个花絮：“作为 datalist 元素后代的每个选项元素……代表一个建议。”

原文由 james.garriss 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

从技术角度来看，它们完全不同。 <datalist> 是其他元素选项的抽象容器。在你的情况下，你已经将它与 <input type="text" 一起使用，但你也可以将它与范围、颜色、日期等一起使用。http: //demo.agektmr.com/datalist/

如果将它与文本输入一起使用，作为一种自动完成功能，那么问题实际上是：使用自由格式的文本输入更好，还是使用预先确定的选项列表更好？在那种情况下，我认为答案更明显一些。

如果我们专注于使用 <datalist> 作为文本字段的选项列表，那么这里是它与选择框之间的一些具体区别：

1. A <datalist> fed 文本框有一个字符串用于显示标签和提交。选择框可以有不同的提交值与显示标签 <option value='ie'>Internet Explorer</option> 。

2. <datalist> fed 文本框不支持 <optgroup> 标签来组织显示。

3. 您不能将用户限制在 <datalist> 中的选项列表，就像您可以使用 <select> 一样。

4. onchange 事件的工作方式不同。在 <select> 元素上，onchange 事件在更改时立即触发，而对于 <input type="text" 元素失去焦点或用户按下 enter 后触发事件。

5. <datalist> 跨浏览器的支持确实参差不齐。显示所有可用选项的方式不一致，事情只会变得更糟。

在我看来，最后一点真的很重要。由于您必须有一个更通用的自动完成回退，因此几乎没有理由去配置一个 <datalist> 的麻烦。此外，任何像样的自动完成插件都将允许设置选项显示样式的方法，而 <datalist> 不会。如果 <datalist> 接受 <li> 您可以随心所欲地操纵的元素，那真是太棒了！但不是。

据我所知， <datalist> 搜索是从字符串开头开始的精确匹配。因此，如果您有 <option value="internet explorer"> 并且搜索“explorer”，您将不会得到任何结果。大多数自动完成插件将搜索文本中的任何位置。

我只使用 <datalist> 作为一些内部页面的快速和懒惰的便利助手，我 100% 确定用户拥有最新的 Chrome 或 Firefox，并且不会尝试提交虚假值。对于任何其他情况，由于浏览器支持非常差，很难推荐使用 <datalist> 。

原文由 mastaBlasta 发布，翻译遵循 CC BY-SA 4.0 许可协议