养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

如何给Input元素添加数据列表

时间:2024-10-08 08:29:47

我们遄咿湫幼制作网页的时候,下拉选择框是经常需要的,但是有的时候我们需要点击input框弹出下拉框,这该怎么做呢?下面小编给大家分享一下。

工具/原料

Sublimetext

方法/步骤

1、首先一提到下拉框,大多数人都回用select来进行实现,如下图所示

如何给Input元素添加数据列表

2、下面我们直接给input添加下拉框,如下图所示,声明一个input元素

如何给Input元素添加数据列表

3、接着声明下拉数据列的内容,如下图所示,数据列用datalist进行声明

如何给Input元素添加数据列表

4、然后我们运行一下页面,你会看到数据列的内容并不会显示,如下图所示

如何给Input元素添加数据列表

5、接着在input元素中指定list属性,如下图所示,其值为指定的datalist的id值,如下图所示

如何给Input元素添加数据列表

6、最后运行页面,这个时候你会看到input元素获得焦点以后会自动弹出下拉框,如下图所示

如何给Input元素添加数据列表

7、综上所述,在给input设醅呓择锗置下拉数据的时候只要是通过datalist实现的,注意input的list属性id值一定要对应datalist

© 一点知识