Html 可以在多个元素上重用数据列表吗？_Html_Css_Datalist

Html 可以在多个元素上重用数据列表吗？

html css

Html 可以在多个元素上重用数据列表吗？,html,css,datalist,Html,Css,Datalist,我已对其进行了定义，并将其放置在标记中： <datalist id="colors"> <option>#ff0000</option>  <option>#FF5100</option>  <option>#FF7F00</option> <!-- orang

我已对其进行了定义，并将其放置在

标记中：

<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>

我应该把它放在哪里？

每个选项都使用，而不是

..

但是

我已经在这些浏览器中运行了下面的框架片段：

Chrome 35 Mac->工作正常
Mozilla 30 Mac->工作正常，但没有列表控件，只有裸输入字段
IE 11->工作正常，无列表控制
从IE 9向下，页面变得混乱
Safari 7.0.4无法处理它，它没有显示列表。可能还需要一些其他细节

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

根据HTML5规范，元素应该用在放置“语法内容”的地方。如我所见，这是文档的文本，即

：

编辑： 有时，转到好的ol'W3验证程序非常有用：

如果我把

datalist

放在头部，验证器会报告一些关于“偏离头部-末端标记”的信息。所以这应该是问题的根源之一

片段：

    <html>
      <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>
  </head>
<body>

  <input list="colors" />

</body>
</html>


#ff0000
#FF5100
#FF7F00
#FFBE00
#FFFF00
#C0FF00
#00FF00
#007F7F
#0000FF
#5C00FF
#7F00FF
#BF007F
#FFFFFF
#达达达
#B6B6B6
#929292    
#6D6D
#494949    
#242424    
#000000

首先回答标题中的问题：是的，您可以在多个控件中使用相同的

数据列表

元素，方法是在不同的

输入

元素中使用其

id

属性值，例如

<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">

在这种方法中，

数据列表

元素仍然可以放在

主体

中的几乎任何地方，并且可以被多个

输入

元素引用。

为什么要将其放在

标记中？将其添加到

中没有其他原因，只是因为我不知道将其放置在何处。您应该将其准确放置在希望其显示在文档中的位置。。介于之间，并且可能会为这些选项添加值。谢谢。出于某种原因，我认为它必须在体外才能被重用。只是出于好奇：哪个组件返回了这个错误？我知道浏览器会在调试环境中报告Javascript错误，但是HTML？谢谢。有道理！这可能是有用的信息，但它并没有解决所问的问题。出色的答案！非常感谢。

<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">

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