HTML - 列表属性

HTML list 属性用于 <input> 元素，以指定用户可以选择的一系列预定义选项。

datalist 元素提供预定义值的列表，以建议用户为此输入使用。

工作原理

当用户开始在输入字段中键入时，将出现一个下拉列表，其中包含在 <datalist> 中定义的选项。
用户可以从此列表中选择一个选项，该选项将使用所选值填充输入字段。
这对于提供建议或用户可以选择的一系列预定义值特别有用，从而增强了用户体验。

语法

<tag list = "value" />

其中 value 应为 datalist 元素的 id 值。

应用于

以下列出的元素允许使用 HTML 列表属性

元素	描述
<input>	HTML <input> 标签用于接受用户输入的各种类型。

HTML 列表属性示例

以下示例将说明 HTML 列表属性，以及我们应该在哪里以及如何使用此属性！

带有 datalist 中预定义值的文本输入

在以下示例中，我们将 `list` 属性与 `input type=text` 一起使用，并将 `list` 属性的值指定为 `datalist` 的 id 名称。

<!DOCTYPE html>
<html lang="en">

<body>
   <p>
      Click on input field and select 
      from dropdown: 
   </p>
   <input type="text" list="fruits">
   <datalist id='fruits'>
      <option value="Apple"></option>
      <option value="Banana"></option>
      <option value="Orange"></option>
      <option value="Grapes"></option>
      <option value="Pears"></option>
   </datalist>
</body>

</html>

数字输入的列表属性

考虑另一种情况，我们将使用 `list` 属性与 `input type=number`。用户可以选择下拉列表中的数字，或在字段中输入数字。

<!DOCTYPE html>
<html lang="en">

<body>
   <!--Example of the HTML list attribute -->
   <p>
      Click on input field and 
      select from dropdown: 
   </p>
   <input type="number" 
          list="numbers" 
          placeholder="Select number..">

   <datalist id='numbers'>
      <option value="10"></option>
      <option value="20"></option>
      <option value="30"></option>
      <option value="40"></option>
      <option value="50"></option>
   </datalist>

</body>
</html>

时间输入的列表属性

让我们来看一下下面的示例，我们将使用 `list` 属性与 `input type=time`。用户可以选择下拉列表中的时间，或输入所需的时间。

<!DOCTYPE html>
<html lang="en">

<body>
   <p>
      Click on input field and 
      select from dropdown: 
   </p>
   <input type="time" 
          list="hours" 
          placeholder="Select time..">
   <datalist id='hours'>
      <option value="12:00"></option>
      <option value="13:00"></option>
      <option value="14:00"></option>
      <option value="15:00"></option>
   </datalist>
</body>

</html>

支持的浏览器

属性
list	是 20.0	是 10.0	是 4.0	否	是 9.6

html_attributes_reference.htm

打印页面