HTML <input> 标签的 list 属性 详解
HTML基础 2022-06-02 12:03:21小码哥的IT人生shichen
HTML <input> 标签的 list 属性
实例
带有 datalist 的表单：
<form action="demo_form.php">
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="phpcodeweb" value="http://www.phpcodeweb.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
完整实例【亲自试一试】：
<!DOCTYPE HTML>
<html>
<body>
<form action="/demo/demo_form.php">
网页：<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="phpcodeweb" value="http://www.phpcodeweb.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
list 属性引用数据列表，其中包含输入字段的预定义选项。
HTML 4.01 与 HTML 5 之间的差异
list 属性是 <input> 标签在 HTML5 中的新属性。
语法
<input list="value">
属性值
| 值 | 描述 |
|---|---|
| datalist-id | 文档中的 datalist 的 id。 |
