HTML - list 属性

HTML list 属性与 <input> 元素一起使用，以指定用户可以从中进行选择的预定义选项列表。

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

它是如何工作的

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

语法


<tag list = "value" />

其中 value 应该是 datalist 元素的 id 值。

适用于

下面列出的元素允许使用 HTML list 属性。

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

HTML 列表属性的示例

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

在 datalist 中使用预定义值的文本输入

在以下示例中，我们使用 'list' 属性，输入 type=text，并提及列表属性的值作为 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>

数字输入的列表属性

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


<!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 属性

让我们看一下以下示例，我们将在其中使用带有输入 type=time 的 list 属性。用户可以从下拉列表中选择时间或输入他需要的时间。


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

支持的浏览器

浏览器
是否支持	20.0	10.0	4.0	No	9.6

打印本页