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便可较为方便地获取选中的值。