Rumah >hujung hadapan web >Tutorial H5 >HTML5中的Datalist元素标签怎么用

HTML5中的Datalist元素标签怎么用

藏色散人
藏色散人asal
2018-12-03 15:28:145644semak imbas



fc86e7b705049fc9d4fccc89a2e80ee3 标签是 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通过输入元素列表属性绑定(或链接)。

注:

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

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

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

Atas ialah kandungan terperinci HTML5中的Datalist元素标签怎么用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya:html5是什么意思Artikel seterusnya:如何使用HTML5 canvas绘制文字