首页前端开发HTMLHTML5中的Datalist元素标签怎么用

HTML5中的Datalist元素标签怎么用

时间2024-01-23 20:31:24发布访客分类HTML浏览204
导读:收集整理的这篇文章主要介绍了HTML5中的Datalist元素标签怎么用,觉得挺不错的,现在分享给大家,也给大家做个参考。<datalist> 标签是 html 5 中的新标签,此元素在表单中用于从用户中接收数据,它可以显示供用...
收集整理的这篇文章主要介绍了HTML5中的Datalist元素标签怎么用,觉得挺不错的,现在分享给大家,也给大家做个参考。datalist> 标签是 html 5 中的新标签,此元素在表单中用于从用户中接收数据,它可以显示供用户选择的选项。

推荐学习:《HTML5教程》

下面我们就通过具体的代码示例给大家介绍。

!DOCTYPE>
    html>
    meta charset="utf-8">
    head>
        tITle>
    Datalist元素使用示例/title>
    /head>
    body>
    input name="section" list="scripts" />
    datalist id="scripts">
        option value="PHP" />
        option value="JavaScript" />
        option value="java" />
        option value="Go" />
        option value="python" />
        option value="c++" />
    /datalist>
    /body>
    /html>
    

效果如下图:

它具有自动完成功能,可帮助用户在文本框中输入内容,与下拉列表框或单选按钮不同,用户可以编写任何文本而不限制由datalist给出的选项。Datalist通过输入元素列表属性绑定(或链接)。

注:

datalist> 标签定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值。

datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。需使用 input 元素的 list 属性来绑定 datalist。

本篇文章就是关于HTML5中的Datalist元素的用法介绍,简单易懂,希望对需要的朋友有所帮助!

以上就是HTML5中的Datalist元素标签怎么用的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: 如何使用HTML5 canvas绘制文字下一篇:html5是什么意思猜你在找的html5相关文章 关于移动端h5开发相关内容总结2022-05-17html5教程-学表单的第二天2018-12-10html5教程-HTML5浏览器支持2018-12-10html5教程-HTML5智能表单2018-12-10html5教程-微信H5使用resLoader实现加载页效果2018-12-10html5教程-day01-初级-JS0-热身运动JS入门教程2018-12-10html5教程-html5shiv.js和respond.min.js2018-12-10html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性2018-12-10html5教程-使用Html5实现手风琴案例2018-12-10html5教程-html5笔记2018-12-10 其他相关热搜词更多phpjavapython程序员load

若转载请注明出处: HTML5中的Datalist元素标签怎么用
本文地址: https://pptw.com/jishu/584611.html
html5实现背景音乐的自动播放 如何使用HTML5 canvas绘制文字的轮廓

游客 回复需填写必要信息