如何引用一个包含 `` 元素预定义选项的元素？在 HTML 中？

HTML 的 `` 标签用于为表单元素添加自动完成功能。它为用户提供了一组预定义的选项来选择数据。“list” 属性包含 “input” 元素，应与 “``” 标签一起使用。`datalist` 的 id 和 “list” 属性的值是相关的。

以下是一些例子……

示例

在下面的例子中，我们使用 `datalist` 为用户提供预定义的选项。

如果您按下 A，它将显示以字母 A 开头的板球运动员列表。

<!DOCTYPE html>
<html>
<body>
   <label>
      Enter your favorite cricket player:<br />
      <input type="text" id="players" list="Players">
      <datalist id="Players">
         <option value="MSD">
         <option value="Virat">
         <option value="Sangakara">
         <option value="Sehwag">
         <option value="Watson">
         <option value="Raina">
         <option value="Hussey">
         <option value="ABD">
      </datalist>
   </label>
</body>
</html>

输出

执行上述脚本后，您将得到一个包含不同球员的数据列表，如果您按下任何字母，它将列出包含所按字母的名称。

示例

另一个例子如下所示：

<!DOCTYPE html>
<html>
<head>
   <title>HTML Datalist Tag</title>
</head>
<body>
   <input list = "tutorials" />
   <datalist id = "tutorials">
      <option value = "Java">
      <option value = "ASP">
      <option value = "PHP">
      <option value = "Ruby">
      <option value = "jQuery">
   </datalist>
   <p>Try to add any of the tutorial name mentioned above.</p>
</body>
</html>

输出

执行上述脚本后得到的输出如下：

示例：日期和时间类型

使用 `datalist` 标签，选择月份、日期、时间、本地时间等类型将更容易从下拉列表中选择。

<!DOCTYPE html>
<html>
<head>
<body>
   <input type="time" list="Hours">
   <datalist id="Hours">
      <option value="10:00">
      <option value="11:00">
      <option value="12:00">
   </datalist>
</body>
</head>
</html>

输出

执行上述脚本后得到的输出如下：

示例：范围类型

使用 `datalist` 标签，可以使用滑块在特定范围内选择值，滑块在每个推荐值处用多个哈希标记表示。

<!DOCTYPE html>
<html>
<head>
<body>
   <input type="range" list="tickmarks">
   <datalist id="tickmarks">
      <option value="0">
      <option value="10">
      <option value="20">
      <option value="30">
   </datalist>
</body>
</head>
</html>

输出

执行上述脚本后得到的输出如下：

示例：颜色类型

`datalist` 标签允许用户从各种颜色的列表中选择预定义的颜色。

<!DOCTYPE html>
<html>
<head>
<body>
   <input type="color" list="Colors">
   <datalist id="Colors">
      <option value="#000000">
      <option value="#FFFFFF">
      <option value="#FFF000">
      <option value="#A11112">
   </datalist>
</body>
</head>
</html>

输出

执行上述脚本后得到的输出如下：

示例：密码类型

`datalist` 标签允许用户从各种密码列表中选择随机生成的密码。但出于安全原因，通常没有浏览器支持它。

<!DOCTYPE html>
<html>
<head>
<body>
   <input type="password" list="randomPassword">
   <datalist id="randomPassword">
      <option value="5Mg[_3DnkgSu@!q#">
   </datalist>
</body>
</head>
</html>

输出

执行上述脚本后得到的输出如下：

更新于：2022年9月6日

377 次浏览

启动您的 职业生涯

完成课程获得认证

开始学习
广告
© . All rights reserved.