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

首先回答标题中的问题:是的,你可以datalist在多个控件中使用相同的元素,id在不同的input元素中使用它的属性值,例如

<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 alabel`属性,例如

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

在这种方法中,datalist元素仍然可以放置在几乎任何内部,body并且可以由多个input元素引用.