Question

我已将其定义并放入<head>标记：

<datalist id="colors">

  <option>#ff0000</option>    <!-- red            -->
  <option>#FF5100</option>    <!-- red orange     -->
  <option>#FF7F00</option>    <!-- orange         -->
  <option>#FFBE00</option>    <!-- yellow orange  -->
  <option>#FFFF00</option>    <!-- yellow         -->

  <option>#C0FF00</option>    <!-- yellow green   -->
  <option>#00FF00</option>    <!-- green -->
  <option>#007F7F</option>    <!-- Blue Green     -->
  <option>#0000FF</option>    <!-- Blue -->
  <option>#5C00FF</option>    <!-- Blue Violet    -->

  <option>#7F00FF</option>    <!-- Violet         -->
  <option>#BF007F</option>    <!-- Red Violet     -->
  <option>#FFFFFF</option>    <!-- White          -->
  <option>#DADADA</option>    <!-- Gray1          -->
  <option>#B6B6B6</option>    <!-- Gray2          -->

  <option>#929292</option>    <!-- Gray3          -->
  <option>#6D6D6D</option>    <!-- Gray4          -->
  <option>#494949</option>    <!-- Gray5          -->
  <option>#242424</option>    <!-- Gray6          -->
  <option>#000000</option>    <!-- Black          -->

</datalist>

它似乎有效，但我收到了错误：

Unexpected end tag (head) - ignored.

我应该把它放在哪里？

Answer 1

首先回答标题中的问题：是的，您可以在多个控件中使用相同的datalist元素，方法是在不同的id元素中使用其input属性值，例如< / p>

<datalist id="colors">...</datalist>
<label for="car">Color of your car:</label> <input type="color" id="car" list="colors">
<label for="tie">Color of your tie:</label> <input type="color" id="tie" list="colors">

关于“我应该把它放在哪里？”的问题，HTML5 LC说的是datalist：

可以使用此元素的上下文：在预期措辞内容的地方。

这几乎意味着文档body中的任何位置，而不是head中的位置。如果使用得当，它的位置无关紧要，因为它不会产生可见的内容。你可以把它，例如在引用它的第一个input元素之前（或之后），或者如果您愿意，在body的开头或结尾处。

但是，如果使用<option>#ff0000</option>之类的标记，与<option value="#ffff00">相反，在此上下文中，则放置很重要，因为现在有可见内容（字符串＃ FF0000）。在不支持datalist元素的旧浏览器上，此类内容将显示在您放置元素的位置。

如果您使用的<input type="color">似乎很可能，那么您应该考虑IE上不支持该元素类型的情况。问题是足够新版本的IE支持datalist，但即使IE 11仍然实现<input type="color"> as a simple text box, . This means that the user, on clicking element, would see a dropdown list of color codes like #FF0000. For this reason, unless IE is irrelevant, you should specify a visible name for the color in a label`属性，例如

  <option value="#ff0000" label="red">
  <option value="#FF5100" label="red orange">

在这种方法中，datalist元素仍然可以放在body内的几乎任何位置，并且可以被多个input元素引用。

Answer 2

每个选项都不使用

<option>...</option>但<option value="...">

Answer 3

我在这些浏览器中运行了下面的骨架代码段：

Chrome 35 Mac - ＆gt;工作正常
Mozilla 30 Mac - ＆gt;工作正常，但没有列表控件，只有裸输入字段
IE 11 - ＆gt;工作正常，没有列表控制。
从IE 9开始向下翻页。
Safari 7.0.4无法处理它，它显示没有列表。需要一些其他细节。

所以你的错误可能来自另一个方面。

根据HTML5规范，该元素应该用于放置“Phrasing content”的地方。 http://www.w3.org/TR/html5/forms.html#the-datalist-element。正如我所见，这是文档的文字<body>：http://www.w3.org/TR/html5/dom.html#phrasing-content-1

修改有时候去找好'W3验证器：http://validator.w3.org/check

是有用的
如果我将datalist放在头部，验证器会报告“偏离头端标签”。所以这应该是问题的一个来源。

段：

<html> <head> <datalist id="colors"> <option>#ff0000</option>  <option>#FF5100</option>  <option>#FF7F00</option>  <option>#FFBE00</option>  <option>#FFFF00</option>  <option>#C0FF00</option>  <option>#00FF00</option>  <option>#007F7F</option>  <option>#0000FF</option>  <option>#5C00FF</option>  <option>#7F00FF</option>  <option>#BF007F</option>  <option>#FFFFFF</option>  <option>#DADADA</option>  <option>#B6B6B6</option>  <option>#929292</option>  <option>#6D6D6D</option>  <option>#494949</option>  <option>#242424</option>  <option>#000000</option>  </datalist> </head> <body> <input list="colors" /> </body> </html>

是否可以在多个元素上重用数据表？

3 个答案: