HTML Form: Select-Option vs Datalist-Option
我想知道 Select-Option 和 Datalist-Option 之间有什么区别。在任何情况下使用其中一种会更好吗？每个示例如下：
选择选项
|
1
2 3 4 5 6 7 |
<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> |
数据列表选项
|
1
2 3 4 5 6 7 8 |
<input type=”text” list=”browsers”>
<datalist id=”browsers”> <option value=”Firefox”> <option value=”IE”> <option value=”Chrome”> <option value=”Opera”> <option value=”Safari”> </datalist> |
- 因为 HTML5 明确表示未引用的属性是有效的：w3.org/TR/html-markup/syntax.html#syntax-attr-unquoted
- 有谁知道为什么我们不关闭 datalist-option 中的 option 标签？崇高似乎想要
- @ johnny Metz 您可以关闭标签，但它可以自动关闭您也可以执行以下操作： code <input list=”browsers” name=”browser”> <datalist id=”browsers”> \\t<option value=”firefox”>Firefox</option> \\t<option value=”ie”>IE</option> \\t<option value=”chrome”>Chrome</option> \\t<option value=”opera” >Opera</option> \\t<option value=”safari”>Safari</option> </datalist> code 结果很奇怪。 Datalists 打印列表中的值。然后该值成为输入字段的值。
- @JohnnyMetz，HTML 5 部分是对 XHTML 的反应。对于某些元素，例如 option，不需要有结束标记或自闭。 HTML 5 != XHTML。
- 规范说，”某些正常元素的开始和结束标签可以省略。”它还说，”如果选项元素后面紧跟着另一个选项元素，或者它后面紧跟着一个 optgroup 元素，或者父元素中没有更多内容，则可以省略选项元素的结束标记。” w3.org/TR/html/syntax.html#optional-tags
将其视为要求和建议之间的区别。对于 select 元素，用户需要选择您提供的选项之一。对于 datalist 元素，建议用户选择您提供的选项之一，但实际上他可以在输入中输入任何他想要的内容。
编辑1：所以你使用哪一个取决于你的要求。如果用户必须输入您的选择之一，请使用 select 元素。如果用户可以输入任何内容，请使用 datalist 元素。
编辑 2：在 HTML 生活标准中发现这个花絮：”作为 datalist 元素后代的每个选项元素……代表一个建议。”
- 此外，它在其他浏览器中大多 [部分支持]((caniuse.com/#feat=datalist)，存在诸如长数据列表变得不可滚动等错误。
- 目前在 chrome 中，如果输入(键入)数据，它会禁止单击箭头。在大多数情况下，这可能并不理想。
从技术angular来看，它们是完全不同的。 <datalist> 是其他元素选项的抽象容器。在您的情况下，您已将其与 <input type=”text” 一起使用，但您也可以将其与范围、颜色、日期等一起使用。 http://demo.agektmr.com/datalist/
如果将它与文本输入一起使用，作为一种自动完成，那么问题真的是：使用自由格式的文本输入还是使用预先确定的选项列表更好？在那种情况下，我认为答案更明显。
如果我们专注于使用 <datalist> 作为文本字段的选项列表，那么以下是它与选择框之间的一些具体区别：
一个 <datalist> 馈送文本框有一个用于两个显示的字符串
标签并提交。选择框可以有不同的提交值与显示标签 <option value=’ie’>Internet Explorer</option>.
<datalist> 馈送文本框不支持 <optgroup> 标记来组织显示。
您不能像使用 <select> 那样将用户限制在 <datalist> 中的选项列表中。
onchange 事件的工作方式不同。在 <select> 元素上，onchange 事件在更改时立即触发，而使用
<input type=”text” 元素丢失后触发事件
焦点或用户按下回车键。
<datalist> 对跨浏览器的支持确实参差不齐。显示所有可用选项的方式不一致，事情只会得到
从那里开始更糟。
在我看来，最后一点真的很重要。既然你必须有一个更通用的自动完成后备，那么几乎没有理由去经历配置 <datalist> 的麻烦。此外，任何体面的自动完成插件都将允许设置选项显示的样式，而 <datalist> 不会这样做。如果 <datalist> 接受了您可以随意操作的
<MMKG1>
元素，那就太好了！但是没有。
据我所知，<datalist> 搜索与字符串开头的完全匹配。因此，如果您有 <option value=”internet explorer”> 并且您搜索了 \\’explorer\\’，您将不会得到任何结果。大多数自动完成插件会搜索文本中的任何位置。
我只将 <datalist> 用作一些内部页面的快速和懒惰的便利助手，我可以 100% 确定用户拥有最新的 Chrome 或 Firefox，并且不会尝试提交虚假值。对于任何其他情况，由于浏览器支持非常差，很难推荐使用 <datalist>。
- 优秀的答案！你能解释一下你的第二个Bullets吗？”组织显示的选项组”是什么意思？谢谢。
- afaik(2019 年，在 Chrome 和 Firefox 上)，<datalist> 匹配中缀(不仅仅是前缀)。所以”输入”re”建议同时使用”Firefox”和”Internet Explorer”。
- @GovindRai 我粗略搜索”optgroup 元素”会从始终有用的 MDN 返回此页面，其中包含更多信息(和示例)：developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup
- 我在 Firefox 66 和 Chrome 73 下测试过——实际上，datalist 标签匹配任何地方，例如，如果你的 datalist 包含国家名称，”ted”将匹配”United States”和”United Kingdom”。
Datalist 本身包含自动完成和建议，它还可以允许用户输入未在建议中定义的值。
Select 只为您提供用户必须从中选择的预定义选项
数据列表是支持 HTML5 的浏览器中的新 HTML 标记。
它呈现为带有一些选项列表的文本框。
例如，对于性别文本框，当您在文本框中键入 \\’M\\’ 或 \\’F\\’ 时，它将为您提供男性女性选项。
|
1
2 3 4 5 |
<input list=”Gender”>
<datalist id=”Gender”> <option value=”Male”> <option value=”Female> </datalist> |
- 没错，但它确实提供了一个不错的新信息，即键入第一个字母将选择列表中的相应项目。
类似于选择，但datalist有自动建议等附加功能。您甚至可以在键入时键入并查看建议。
用户还可以编写列表中不存在的项目。
要具体回答您的部分问题”有什么情况下最好使用其中一个吗？”，请考虑使用带有重复部分的表格。如果重复部分包含许多 select 标记，则必须为每个选择、每一行呈现 option。
在这种情况下，我会考虑将 datalist 与 input 一起使用，因为相同的 datalist 可以用于任意数量的 input。这可能会在服务器上节省大量渲染时间，并且可以更好地扩展到任意数量的行。
- 如果您不打算为用户提供选择的选项，为什么还要使用数据列表呢？只需使用文本字段即可。
select 和 datalist 之间还有一个重要的区别。
浏览器支持因素来了。
与 datalist 相比，
select 被浏览器广泛支持。请查看此页面以获得对 datalist 的完整浏览器支持–
Datalist 浏览器支持
所有浏览器都有效支持选择(从 IE6、Firefox 2、Chrome 1 等开始)
我注意到 datalist 中没有选定的功能。它只给你选择，但不能有默认选项。您也无法在下一页显示所选选项。
- 输入加数据列表的等效项是在输入本身上设置 value=”(default option)” 。对于 type=”text” 的输??入，此文本将默认显示但可编辑。
来源：https://www.codenong.com/6865943/
