HTML5的datalist规定预定义选项列表的用法,在线实例编辑

datalist标签的用途

使用搜索的时候,搜索框里头一般会下拉出一个下拉菜单,罗列了一些热门的搜索,那是怎么设置的呢?可以使用HTML5中的<datalist>标签,并设置预定义的选项。不同的是,搜索中的预定义选项一般是通过基于大数据的推荐算法来完成,并非人工地添加option选项标签。


datalist标签

<datalist></datalist>

提示:datalist有闭合标签。


<datalist>标签的用法

<datalist>一般情况下同表单中的<input>标签一同使用,而且input标签的list属性值必须是对应的datalist的id属性值,如下实例代码:

datalist规定预定义选项列表实例代码,及在线编辑器

<form>
  <input type='text' list='e1'>
  <datalist id='e1'>
    <option value='HTML教程'>HTML教程</option>
    <option value='python教程'>
<!-- 注意这里的option标签的使用方法 -->
    <option value='JS教程'>JS教程</option>
  </datalist>
</form>

代码解析

如上代码,运行之后,点击输入框,便可弹出对应的预定义的选项列表,如果无法弹出,可以试一试使用其它的浏览器。注意datalist的id属性值和input的list属性值。


datalist中的选项标签option

<option></option>

选项标签option一般会跟value属性一同使用,如此JS便可较为方便地获取选中的值。



全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.