最新更新 sitemap 网站制作设计本站搜索
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442

HTML5教程:datalist标签详解和实例代码

日期:05-17    来源:中国设计秀    作者:cnwebshow.com

文章简介:datalist一般不会独行江湖,它需要与input标签的搭配使用,就像label标签与input标签搭配使用一样。既然与input标签搭配使用,那么这两个标签之间必定存在着“特殊的关系”,不然input与datalist就互不相认了,那么如何才能让他们建立起来这种关系呢?这个时候我们需要y6G中国设计秀

 y6G中国设计秀

注:在其它的一些教程或资料中datalist标签称为下拉列表,我认为这种叫法不够准确,而且不能一下子理解此标签。比如前段时间:“一个朋友问我datalist是不是一种能自定义样式的select?”,后来才知道,有些书籍或教程中称为下拉列表而导致初学者理解错。那么此标签怎么称呼它才合适呢?咱们看完下面的案例后,我再说明:y6G中国设计秀
y6G中国设计秀
datalist标签:y6G中国设计秀
datalist介绍:y6G中国设计秀
datalist一般不会独行江湖,它需要与input标签的搭配使用,就像label标签与input标签搭配使用一样。既然与input标签搭配使用,那么这两个标签之间必定存在着“特殊的关系”,不然input与datalist就互不相认了,那么如何才能让他们建立起来这种关系呢?这个时候我们需要一个新的属性list(注意,不是for),list与for的用法一样,list的值设置为表单元素的 id,这样他们便会自动关联了。y6G中国设计秀
y6G中国设计秀
Chrome对此标签支持不好,Firefox和Opera可很好的支持y6G中国设计秀
y6G中国设计秀
datalist作用:y6G中国设计秀
我们经常在网上的搜索框中看到当输入一个字符,输入框下方会自动列出你输入的关键词,比如Google或百度的搜索,如下图:y6G中国设计秀
 y6G中国设计秀

此效果非HTML5的datalist技术实现y6G中国设计秀
 y6G中国设计秀

y6G中国设计秀
datalist案例:y6G中国设计秀
 y6G中国设计秀

    <input list="Webjx.com-search" /> <datalist id="Webjx.com-search"> <option value="Webjx.com"> <option value="W3C标准"> <option value="W3C规则"> <option value="W3C验证"> <option value="前端开发"> <option value="前端开发网"> <option value="2天驾驭DIV+css"> <option value="Webjx.Com"> </datalist>y6G中国设计秀
    y6G中国设计秀
    y6G中国设计秀
    y6G中国设计秀
    datalist说明:y6G中国设计秀
    个人认为称呼datalist为自动补全列表更加合适,因为它并不是下拉列表。y6G中国设计秀