html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

HTML5中的Datalist元素标签怎么用

发布时间：2022-05-17 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了HTML5中的Datalist元素标签怎么用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
<datalist> 标签是 html 5 中的新标签，此元素在表单中用于从用户中接收数据，它可以显示供用户选择的选项。

HTML5中的Datalist元素标签怎么用

推荐学习：《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>

效果如下图：

HTML5中的Datalist元素标签怎么用

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

注：

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

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

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

以上就是HTML5中的Datalist元素标签怎么用的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的HTML5中的Datalist元素标签怎么用全部内容，希望文章能够帮你解决HTML5中的Datalist元素标签怎么用所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的html5相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程