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