HTML5 <datalist>标签用法简答介绍

最新推荐文章于 2022-04-04 22:18:29 发布
最新推荐文章于 2022-04-04 22:18:29 发布
阅读量197 收藏
点赞数
原文链接：https://yq.aliyun.com/articles/573396
版权

本章节介绍一下介绍一下html5新增的<datalist>标签用法的用法，理论就不多讲了，对于这种标签的应用，一个代码实例能够比一车的话要管用的多，代码实例如下:

 
 
 
  
 
   
 
    
 
        

          01 
        
 
        

          02 
        
 
        

          03 
        
 
        

          04 
        
 
        

          05 
        
 
        

          06 
        
 
        

          07 
        
 
        

          08 
        
 
        

          09 
        
 
        

          10 
        
 
        

          11 
        
 
        

          12 
        
 
        

          13 
        
 
        

          14 
        
 
        

          15 
        
 
        

          16 
        
 
        

          17 
        
 
        

          18 
        
 
        

          19 
        
 		 
        
 
         
 
          <!DOCTYPE html>      
         
 
         
 
          < 
          html 
          >      
         
 
         
 
          < 
          head 
          >      
         
 
         
 
          < 
          meta 
          charset 
          = 
          " utf-8" 
          >      
         
 
         
 
          < 
          meta 
          name 
          = 
          "author" 
          content 
          = 
          "http://www.softwhy.com/" 
          />      
         
 
         
 
          < 
          title 
          >蚂蚁部落</ 
          title 
          >  
         
 
         
 
          </ 
          head 
          > 
         
 
         
 
          喜爱版块:< 
          input 
          list 
          = 
          "source" 
          /> 
         
 
         
 
          < 
          datalist 
          id 
          = 
          "source" 
          > 
         
 
         
 
             
          < 
          option 
          value 
          = 
          "div css教程" 
          > 
         
 
         
 
             
          < 
          option 
          value 
          = 
          "javascript教程" 
          > 
         
 
         
 
             
          < 
          option 
          value 
          = 
          "css教程" 
          > 
         
 
         
 
             
          < 
          option 
          value 
          = 
          "jquery教程" 
          > 
         
 
         
 
             
          < 
          option 
          value 
          = 
          "搜索优化" 
          > 
         
 
         
 
             
          < 
          option 
          value 
          = 
          "html专区" 
          > 
         
 
         
 
             
          < 
          option 
          value 
          = 
          "正则表达式" 
          > 
         
 
         
 
          </ 
          datalist 
          > 
         
 
         
 
          </ 
          body 
          > 
         
 
         
 
          </ 
          html 
          > 
         
 
        
 
 
   
 
  
 
 
 
 
当鼠标点击文本框的时候能够出现可供选择的下拉列表，这个功能在很多网站都有应用，当然如果兼容各个浏览器的话，需要借助js实现，但是要有很大的代码量。此标签当前还有很大的浏览器兼容问题，主要是低版本IE浏览器导致的。使用方法将datalist的id属性值和input标签的list属性值关联起来即可。
 
 

 
 

 
 
原文发布时间为：2017-2-13
 
 
本文作者：admin
 
 
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
 
 
 
 
原文链接：HTML5 <datalist>标签用法简答介绍
 


                

        

        




    




    

      

        

            

              
                
                  weixin_34218579
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
「HTML和CSS入门指南」datalist 标签详解

				
			

			

				

					a451319296的博客
				

				

					06-04
					
					2935
					
				

			

		

		

			
				
datalist 标签是一个重要的标签，在 HTML 中用于创建预定义选项列表。使用 datalist 标签可以帮助您提供更快、更方便的用户输入体验。在使用 datalist 标签时，请注意选择正确的属性和方法、提供适当的标签、描述文本和无障碍功能、验证表单数据，并避免兼容性问题。

			
		

	



                

              
                



	

		

			

				
					
HTML5 的新的表单元素(datalist/keygen/output)使用介绍

				
			

			

				

					09-28
				

			

		

		

			
				
HTML5 拥有若干涉及表单的元素和属性，下面为大家介绍下新的表单元素datalist 元素、keygen 元素、output 元素以及它们的使用实例，感兴趣的朋友可以参考下哈，希望对大家有所帮助

			
		

	



                


  
              

                


	

		

			

				
					
html5 datalist兼容易用javascript封装实现

				
			

			

				

					weixin_30522183的博客
				

				

					05-12
					
					649
					
				

			

		

		

			
				
各个浏览器对于datalist的支持不一致，而且放入需要像select的value-title的那样的列表查看titile, 代码中使用value，支持并不好，深入了解可以看这个HTML5 datalist在实际项目中应用的可行性研究
使用js代码对datalist进行包装可以达到想要的效果
chrome下效果

firefox下效果

ie下跟firefox类同
实现代码如下
...

			
		

	





	

		

			

				
					
html datalist标签实现多选,html5 datalist标签使用

				
			

			

				

					weixin_29570795的博客
				

				

					06-14
					
					1532
					
				

			

		

		

			
				
html5 datalist标签使用发布时间：2020-05-14 11:10:52来源：亿速云阅读：53作者：Leah今天小编就为大家带来一篇html5中datalist标签使用的文章。小编觉得挺实用的，为此分享给大家做个参考。一起跟随小编过来看看吧。 标签是 HTML 5 中的新标签，此元素在表单中用于从用户中接收数据，它可以显示供用户选择的选项。推荐学习：《HTML5教程》下面我们就通过具体...

			
		

	



		

			
		



	

		

			

				
					
DataList下使用CheckBox实现多选

				
			

			

				

					weixin_30848775的博客
				

				

					03-14
					
					377
					
				

			

		

		

			
				
1.在页面中需要的地方放置<asp:CheckBox ID="CheckBox1" runat="server" />
2.绑定数据时绑定 DataList1.DataKeyField = "Id";
3.按钮事件

            for (int i = 0; i < this.DataList1.Items.Count; i++)            {...

			
		

	





	

		

			

				
					
HTML5标签 dataList

				
			

			

				

					qq_43623970的博客
				

				

					06-28
					
					544
					
				

			

		

		

			
				
因为所出标签太多，所以我们很难都用得上或者意识到需要用。 但其实也有许多有趣但是我们未曾发掘的标签，本文所要介绍的 **** 便是一个。
是什么？
**** 标签一个类似于 **** 标签一样可以通过包裹 **** 来表示控件可选值的，唯一不同的就是 **** 需要配合 **** 来使用，而且 **** 不表示任何内容，仅作展示。 我们康个栗子：

嗯，就芥末简单。 下面是它的兼容性情况：

搜索提示
在我们的日常开发中，如果我们要实现一个搜索框的搜索提示，实际上我们还要写一堆的事件监听跟数据绑定，但是如果

			
		

	





	

		

			

				
					
html5 datalist标签使用示例(自动完成组件)

				
			

			

				

					01-21
				

			

		

		

			
				
HTML5时代则不用了，直接使用datalist标签，直接减少了工作量。如下 复制代码代码如下:<!DOCTYPE html><html> <head> <title>HTML5 datalist tag</title> <meta charset=”utf-8″&gt...

			
		

	





	

		

			

				
					
Html5新标签datalist实现输入框与后台数据库数据的动态匹配

				
			

			

				

					09-27
				

			

		

		

			
				
HTML5新增的标签datalist实现输入中文/拼音首字母时，自动进入数据库模糊查询，并返回相应的结果，生成datalist，由于在输入框中的输入内容发生变化时，datalist会自动触发下拉框，解决方案非常好，下面通过本文给...

			
		

	





	

		

			

				
					
(完整)HTML5常用标签大全.doc

				
			

			

				

					11-15
				

			

		

		

			
				
* `<datalist>`：定义下拉列表 * `<keygen>`：定义生成密钥 * `<output>`：定义输出的一些类型  框架标签  * `<frame>`：定义框架集的窗口或框架 * `<frameset>`：定义框架集 * `<noframes>`：定义针对不支持框架的...

			
		

	





	

		

			

				
					
html5 datalist属性,HTML5 元素 datalist 介绍

				
			

			

				

					weixin_39517902的博客
				

				

					06-04
					
					329
					
				

			

		

		

			
				
元素介绍想象一下我们想要用户输入一个字符串，例如他们的名字，我们可能会用到元素，这样子用户就可以随意的输入他们的内容。想象一下假如我们需要用户输入的是他们的国家居住地，我们更喜欢使用元素，这个将会限制可选的结果(有时候也许是好的)，并且还存在着一个潜在的巨大用户选择。但如果我们想要用户自由输入的同时又有一些建议选项，这里就是的用处了。示例代码datalist包含元素，类似于元素，然而并不是独立控制...

			
		

	





	

		

			

				
					
php动态添加select option,使用js如何给select动态添加option（详细教程）

				
			

			

				

					weixin_39530647的博客
				

				

					03-21
					
					255
					
				

			

		

		

			
				
下面我就为大家分享一篇利用js给datalist或select动态添加option选项的方法，具有很好的参考价值，希望对大家有所帮助。有时需要从配置文件中读取信息，然后添加到用户的选择项中，比如select的option选项，下面针对此类情况做了一个实例内容如下：鼠标点击时加载选择城市://需要添加的数据内容,可以通过ajax请求获取var cities = [{label:"xian",valu...

			
		

	





	

		

			

				
					
html5data兼容性,HTML5 datalist与动态邮箱地址（兼容IE）效果演示 » 张鑫旭-鑫空间-鑫生活...

				
			

			

				

					weixin_39989668的博客
				

				

					06-29
					
					261
					
				

			

		

		

			
				
HTML代码：邮箱：JS代码：document.createElement("datalist");var eleList = document.getElementById("emailList"), eleMail = document.getElementById("email");if ("placeholder" in document.createElement("input")) {...

			
		

	





	

		

			

				
					
一些不常见的html标签  及其兼容性

				
			

			

				

					dianchi0164的博客
				

				

					11-14
					
					107
					
				

			

		

		

			
				
1.
<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
&...

			
		

	





	

		

			

				
					
HTML5中datalist标签的使用

				
			

			

				

					星月昭铭的博客
				

				

					10-01
					
					6439
					
				

			

		

		

			
				
datalist是html5中出现的新标签，它需要配合input输入框来使用，它的作用就是定义了input可能要输入的值（可以被快捷选择），
定义一个datalist的标签需要给他一个id，input就是根据id来与其绑定的，datalist中的option就是和列表一样，里面的每个数据都是可被用户所选择的
<datalist id="name">
	<option value=...

			
		

	





	

		

			

				
					
html5中datalist简单用法

				
			

			

				

					Aoqidx的专栏
				

				

					11-19
					
					9245
					
				

			

		

		

			
				
学习前端半个月了，越来越觉得前端太有趣了，今后将在博文中记录自己学习的点滴，毕竟好记性不如烂笔头嘛。
最近做东西需要邮箱补全，接触到datalist，觉得蛮好用的。datalist是需要与input标签配合使用，可以用在输入推荐，邮箱补全等场合。下面将简单记录相关用法。
1.用在输入推荐上：
	请输入您最喜欢的科目：
	
		
			
			
			
			
		
	
datalist的i

			
		

	





	

		

			

				
					
HTML5 datalist标签的使用

					
热门推荐

				
			

			

				

					weixin_40233697的博客
				

				

					05-25
					
					1万+
					
				

			

		

		

			
				
HTML 5 &lt;datalist&gt; 标签定义和用法&lt;datalist&gt;标签定义可选数据的列表。与input元素配合使用，就可以制作出输入值的下拉列表。当input输入框里输入信息时，根据敲进去的字母，自动显示一个提示下列列表。类似于使用百度、360搜索时的显示结果。例子&lt;input id="myCar" list="cars" /&gt;
&lt;datalist i...

			
		

	





	

		

			

				
					
Html5 中的datalist用法

				
			

			

				

					Leon的博客
				

				

					11-07
					
					7112
					
				

			

		

		

			
				
datalist 标签定义选项列表，与input元素配合使用该元素，来定义input可能的值datalist及其选项不会被显示出来，它仅仅是合法的输入值列表<input id="myCar" lsit="cars" />
<datalist id="cars">
    <option value="BMW">
    <option value="Ford">
    <option value=

			
		

	





	

		

			

				
					
课堂笔记-HTML基础

				
			

			

				

					冷冷的oO
				

				

					04-04
					
					822
					
				

			

		

		

			
				
HTML文件基础知识
HTML文件是标准的ASCII文件，且其后缀名为htm或html的文件。
可以使用任何能够生成TXT类型源文件的文本编辑器来制作超文本标记语言文件。
HTML文件中的标记是不区分大小写的。
注意：现代HTML文件通常使用UTF-8编码，因此所使用的文本编辑器最好支持该编码。标准的超文本标记语言文件都具有一个基本的文档结构，标记一般都是成对出现，部分标记也有单标记。
<!DOCTYPE html>             <!--文档声明：告诉浏览器以下文件用HTML版

			
		

	





	

		

			

				
					
10.怎么使用HTML中的<datalist>？

				
			

			

				

					qq_46582421的博客
				

				

					05-10
					
					175
					
				

			

		

		

			
				
是下拉列表作用
首先第一点 你要先保证你已经把option都添加上了 然后才能设置默认选项 否则会无效
第二 设置默认选项的时候 要用prop来代替attr因为attr在IE上有的版本不支持





			
		

	





	

		

			

				
					
32、 list属性用于指定输入框所绑定的<datalist>标签。 （1分） 对 错

					
最新发布

				
			

			

				

					05-29
				

			

		

		

			
				
正确。list属性用于指定输入框所绑定的<datalist>标签，<datalist>标签通常用于为<input>元素创建自动完成的下拉列表。它的基本语法如下：

```
<label for="input_id">输入框:</label>
<input type="text" id="input_id" list="datalist_id">
<datalist id="datalist_id">
  <option value="选项1">
  <option value="选项2">
  <option value="选项3">
</datalist>
```

在这个例子中，我们为输入框指定了一个id为“datalist_id”的<datalist>标签，<datalist>标签中包含了若干个<option>标签，每个<option>标签代表一个选项。当用户输入内容时，浏览器会依据输入框中的值过滤出与之匹配的选项，并将其显示在下拉列表中。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值