HTML <datalist>元素包含了一组 <option>元素,这些元素表示其它表单控件可选值; <datalist>标记是一个HTML5元素,它定义 <input>标记的建议值列表。这些建议值将在输入控件中显示为下拉列表,并且当用户将数据输入到输入控件中时,可用的选项将被过滤。此标记通常也称为 <datalist&
下面是一个 <input> 元素,<datalist> 中描述了其可能的值:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 datalist标签的使用(菜鸟教程 (cainiaoplus.com))</title> </head> <body> <label for="tutorial_choice">Tutorials: </label> <input list="tutorial_types" name="tutorial_choice" id="tutorial_choice"> <datalist id="tutorial_types"> <option value="HTML"> <option value="CSS"> <option value="SQL"> </datalist> </body> </html>测试看看 ‹/›
在此HTML5文档示例中,我们使用了<datalist>标签为<input>标签创建建议值列表。建议使用3个值(HTML,CSS和SQL),这些选择将显示为下拉列表,供用户选择。
<datalist>标记具有以下浏览器的基本支持:
IEFirefoxOperaChromeSafari
HTML <datalist>元素位于<body>标记内。<datalist>标记通常位于<form>标记内。
<datalist>标签包含一组<option>标签,这些标签为关联的<input>标签提供了可能的值。
<datalist> 标签规定了 <input> 元素可能的选项列表。
<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表,里边的选项是预先定义好的,将作为用户的输入数据。
请使用 <input> 元素的 list 属性来绑定 <datalist> 元素。
<datalist> 标签是 HTML5 中的新标签。
<datalist> 标签支持 HTML 的全局属性。
<datalist> 标签支持 HTML 的事件属性。