HTML5中新增的表单元素——datalist元素

小咪咪 2023-07-06 06:23 42阅读 0赞

今天学习到了一个比较好的元素（datalist元素），怕自己忘了，写了这篇博客：

它可以解决在单选框中只能选择不能输入的问题，类似于提示词的作用：

这里注意datalist元素要写id,与input表单元素的 list属性创建联系

### 例1： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYW5uaWFueGk_size_16_color_FFFFFF_t_70]

在页面上显示如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYW5uaWFueGk_size_16_color_FFFFFF_t_70 1]

### 例2： ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYW5uaWFueGk_size_16_color_FFFFFF_t_70 2]  
在页面上显示如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYW5uaWFueGk_size_16_color_FFFFFF_t_70 3]

假如想要输入的是网址，需要注意value值必须添加http://

### 例3 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYW5uaWFueGk_size_16_color_FFFFFF_t_70 4]

> 这里的datalist元素在火狐浏览器上是没有下拉列表的，要注意！

> 以及datalist的子元素option元素可以写成单标签的格式 ：eg:<option value=“英语” label=“棒”/>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYW5uaWFueGk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200216205438340.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYW5uaWFueGk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYW5uaWFueGk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200216205724937.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYW5uaWFueGk=,size_16,color_FFFFFF,t_70
[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
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYW5uaWFueGk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200216205932428.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYW5uaWFueGk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYW5uaWFueGk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200216210222891.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25pYW5uaWFueGk=,size_16,color_FFFFFF,t_70