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

HTML 的 `` 标签用于向表单元素添加自动完成功能。它为用户提供了一组预定义的选项来选择数据。应将包含 "input" 元素的 "list" 属性与 `` 标签一起使用。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-09-06

377 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告

© . All rights reserved.