HTML 中的数据列表-html教程-PHP中文网

HTML 中的 Datalist 标签示例

示例#3

结论

首页

web前端

html教程

HTML 中的数据列表

PHPz

Sep 04, 2024 pm 04:22 PM

html html5 HTML Tutorial HTML Properties HTML tags

本文提供了 HTML 中数据列表的概要。 Datalist 是 HTML5 中可用的标签，用于自动向用户建议输入值。该标签是 HTML5 功能，使输入元素更具交互性且用户界面更直观。标签与输入元素标签一起使用。它用于显示在输入框中键入时可能出现的值。用户可以自由地在输入框中输入任何值；仅 datalist 标签将提供自动建议值。因此，用户可以更灵活、更轻松地输入值。

语法：

<input list = "xyz" name = "input name" >
<datalist id = "xyz" >
<option value = " . . . " >
<option value = " . . . " >
<option value = " . . . " >
<option value = " . . . " >
</datalist>

登录后复制

在这里，我们有两个主要标签；一个是<输入>标签，第二个是标签。 datalist 标签以开始标签开始。并以结束标记结束。所有选项都包含在 datalist 标记之间。我们已经为 datalist 标签（这里是 xyz）分配了一个 id，并且这个相同的 id 值被传递给输入标签中的 list 属性。因此，两个标签都通过相同的 id 链接。现在它们已链接，我们想要显示或自动建议值列表。然后使用

选项标签与选择标签使用的标签相同。请注意 select 标签和 datalist 标签之间的区别。 select 标签允许仅从可用选项中选择值，而 datalist 标签仅建议列表中的值。 name 属性仅用于标识示例中的输入元素。

属性：

没有可用的特殊属性。标签;默认情况下，它支持全局可用的 Event 和 HTML 属性。

HTML 中的 Datalist 标签示例

以下是示例：

示例#1

让我们设计一个带有自动建议选项的简单输入字段，如下所示：

代码：

<! DOCTYPE html>
<html>
<body>
<label> Car Brand: </label>
<input list = "car_brands" name = "car brand" >
<datalist id = "car_brands" >
<option value = "Honda " >
<option value = "Hyundai " >
<option value = "Toyota " >
<option value = "Volkswagen " >
<option value = "Ford " >
<option value = "Mazda " >
<option value = "Chevrolet " >
<option value = "Kia " >
</datalist>
</body>
</html>

登录后复制

在这里，我们有一个作为汽车品牌的输入元素。在要显示的自动建议中，我们已在选项标签中列出。对于 datalist 标签，我们将 id 指定为 car_brands，并将其传递给输入元素。当用户单击用户框或用户开始输入时，将自动弹出 HTML，其中包含上述自动建议值。

输出:

HTML 中的数据列表

在输出中，点击输入框后，将显示如上所示的汽车品牌列表。

示例#2

datalist标签主要用于表单提交的情况。让我们看一个嵌入表单的示例。

代码：

<!DOCTYPE html>
<html>
<body>
<form action = "#" method = "get" >
<label> Car Brand: </label>
<input list = "car_brands" name = "car brand" >
<datalist id = "car_brands" >
<option value = "Honda " >
<option value = "Hyundai " >
<option value = "Toyota " >
<option value = "Volkswagen " >
<option value = "Ford " >
<option value = "Mazda " >
<option value = "Chevrolet " >
<option value = "Kia " >
</datalist>
<input type = "submit" >
</form>
</body>
</html>

登录后复制

输出:

HTML 中的数据列表

在这里，在输出注释中，我们已将输入元素移动到表单元素中并添加了提交按钮。

示例#3

数据列表自动建议将尝试尽可能地显示最佳匹配。当用户开始输入时，将根据用户输入的值过滤掉建议。让我们修改第一个示例以显示此功能以及输入元素的一些样式。

代码：

<!DOCTYPE html>
<html>
<head>
<style>
.cars {
height: 110px;
background-color: cadetblue;
width: 100%;
}
</style>
</head>
<body>
<div class = "cars" >
<label style = "font-size: x-large; font-weight: 500; margin-left: 20px " > Car Brand: </label >
<input list = "car_brands" name = "car brand" style = "margin-top: 40px; " >
<datalist id = "car_brands" >
<option value = "Aston Martin " >
<option value = "Audi " >
<option value = "Cadillac " >
<option value = "Chevrolet " >
<option value = "Honda " >
<option value = "Hyundai " >
<option value = "Chrysler " >
<option value = "Kia " >
</datalist>
</div>
</body>
</html>

登录后复制

无需用户输入即可输出：

HTML 中的数据列表