HTML datalist 标签

<datalist> 标签用于为 <input> 标签设置预定义选项。每当用户将鼠标光标放在 <input> 上时，所有这些预定义选项都应该可见。

现在让我们看一个在 HTML 中实现 <datalist> 标签的示例 −

示例

<!DOCTYPE html>
<html>
<body>
<p>Favorite Subject</p>
<form action="" method="get">
   <input list="subject" name="subject">
   <datalist id="subject">
      <option value="Programming">
      <option value="Networking">
      <option value="Database">
      <option value="Big Data">
      <option value="Cloud">
      <option value="Framework">
   </datalist>
   <input type="submit">
</form>
</body>
</html>

输出

现在，将鼠标光标保持在输入框内。以下预定义选项现在将可见 −

在上面的例子中，我们为 <input> 设置了预定义选项 −

<datalist id="subject">
   <option value="Programming">
   <option value="Networking">
   <option value="Database">
   <option value="Big Data">
   <option value="Cloud">
   <option value="Framework">
</datalist>

现在，将光标放在上面的 <input> 内，将会看到以下选项，这些选项是我们使用 <datalist> 元素预先定义的 −

Programming
Networking
Database
Big Data
Cloud
Framework

相关文章

• HTML DOM 输入按钮对象
• HTML 画布 shadowBlur 属性
• HTML DOM address 对象
• HTML 画布 shadowColor 属性
• 使用 onmouseover 属性更改网页背景颜色
• HTML 画布 fillStyle 属性
• HTML frame 框架标签
• HTML Canvas clearRect() 方法
• HTML body 标签
• HTML optgroup 标签

有用资源

• html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/