HTML代码：datalist - 数据列表

在HTML中，datalist元素用于创建一个预定义的选项列表，以供用户选择。datalist元素通常与input元素的list属性一起使用，以提供自动完成的功能。

使用datalist元素

要使用datalist元素，您需要在input元素中设置list属性，并将其值设置为datalist元素的id。

以下是一个示例：

<input type="text" list="fruits">
<datalist id="fruits">
  <option value="苹果">
  <option value="香蕉">
  <option value="橙子">
  <option value="葡萄">
</datalist>

在上面的示例中，当用户在文本框中输入内容时，浏览器将显示一个下拉列表，其中包含datalist元素中定义的选项。

支持datalist元素的浏览器

大多数现代浏览器都支持datalist元素，包括Chrome、Firefox、Safari和Edge。然而，Internet Explorer不支持该元素。

使用value属性

datalist元素的option元素还可以使用value属性来设置选项的值。当用户选择一个选项时，该选项的值将作为input元素的值。

以下是一个示例：

<input type="text" list="fruits">
<datalist id="fruits">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
  <option value="grape">葡萄</option>
</datalist>

在上面的示例中，当用户选择"苹果"时，input元素的值将变为"apple"。

使用label属性

datalist元素的option元素还可以使用label属性来设置选项的显示文本。当用户选择一个选项时，该选项的显示文本将显示在input元素中。

以下是一个示例：

<input type="text" list="fruits">
<datalist id="fruits">
  <option value="apple" label="苹果">
  <option value="banana" label="香蕉">
  <option value="orange" label="橙子">
  <option value="grape" label="葡萄">
</datalist>

在上面的示例中，当用户选择"苹果"时，input元素中将显示"苹果"。

总结

HTML的datalist元素提供了一种简单而强大的方式来创建预定义的选项列表。它可以与input元素的list属性一起使用，以提供自动完成的功能。datalist元素的option元素可以使用value属性设置选项的值，使用label属性设置选项的显示文本。

如果您想了解更多关于HTML代码的内容，请访问我们的官网：https://www.idc.net。