• 技术文章 >web前端 >H5教程

    HTML5中的Datalist元素标签怎么用

    藏色散人藏色散人2018-12-05 09:43:37原创3294
    <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元素标签怎么用的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Datalist元素
    上一篇:html5是什么意思 下一篇:如何使用HTML5 canvas绘制文字
    PHP编程就业班

    相关文章推荐

    • html5 datalist标签使用示例(自动完成组件)• HTML5 的新的表单元素(datalist/keygen/output)使用介绍_html5教程技巧• jQuery插件datalist实现很好看的input下拉列表_jquery• HTML5每日一练之datalist标签自动补全的使用• datalist标签

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网