选项列表datalist的使用

最新推荐文章于 2024-04-27 21:55:17 发布

m0_47146894

最新推荐文章于 2024-04-27 21:55:17 发布

阅读量274

点赞数

分类专栏： Java前端HTML 文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_47146894/article/details/127436483

版权

Java前端HTML 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项列表datalist的使用</title>
</head>
<!--

  注：不太推荐这个方式，鼠标点击一次聚焦input后，还需要再点击一次才会显示出列表
  比较推荐使用vue框架中的v-show属性来创建列表框，见《v-show实现选项列表框》
-->
<body>
<h1>input list 属性</h1>

<p>list 属性引用包含 input 元素的预定义选项的 datalist 元素。</p>

<form action="/action_page.php">
  <input list="browsers" name="browser">
  <datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
  <input type="submit" value="Submit">
</form>

<p><b>注释：</b>Safari 12.0（或更早版本）不支持 datalist 标签。</p>
</body>
</html>