今天学习到了一个比较好的元素(datalist元素),怕自己忘了,写了这篇博客:
它可以解决在单选框中只能选择不能输入的问题,类似于提示词的作用:
这里注意datalist元素要写id,与input表单元素的 list属性创建联系
例1:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6fa510b576eb1376e31eb19fc872b7f0.jpeg)
在页面上显示如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/4e20d42fc56868d47185d43ef96605df.jpeg)
例2:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ea7a540c9355e23ae3ba6794e9799b8b.jpeg)
在页面上显示如下:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/9cac4c87b8be1df1bd35f076af891d55.jpeg)
假如想要输入的是网址,需要注意value值必须添加http://
例3
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/35867731b289902f75316f8dc3d1f913.jpeg)
这里的datalist元素在火狐浏览器上是没有下拉列表的,要注意!
以及datalist的子元素option元素可以写成单标签的格式 :eg:<option value=“英语” label=“棒”/>