gpt4 book ai didi

html - 是否可以在多个元素上重用数据列表?

转载 作者:技术小花猫 更新时间:2023-10-29 12:07:49 25 4
gpt4 key购买 nike

我已经定义了它并放在了<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.

我应该把它放在哪里?

最佳答案

先回答标题中的问题:是的,你可以使用相同的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 :

Contexts in which this element can be used: Where phrasing content is expected.

这几乎意味着文档中的任何位置 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标签`属性,例如

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

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

关于html - 是否可以在多个元素上重用数据列表?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24475529/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com