datalist
是 HTML5 中引入的一个新元素,它用于为 <input>
元素提供预定义的选项列表。当用户开始输入时,浏览器会显示一个下拉列表,其中包含与输入值匹配的 datalist
中的选项。这使得用户可以更容易地从预定义的选项中选择,而不是手动输入。
datalist 的用途
- 提供选项建议:为输入字段提供建议或预定义的选项。
- 改善用户体验:帮助用户更快、更准确地输入数据。
- 辅助访问性:对于视觉障碍的用户,
datalist
可以提供额外的上下文和选项。
示例代码
下面是一个使用 datalist
的简单示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Datalist 示例</title>
</head>
<body><form action="">
<label for="browsers">选择一个浏览器:</label>
<input list="browsers" name="browsers" id="browsers"><!-- 定义 datalist -->
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Opera">
<option value="IE">
</datalist><input type="submit">
</form></body>
</html>
在这个示例中:
- 我们有一个文本输入字段,其
list
属性设置为 "browsers"。 - 我们有一个
datalist
元素,其id
为 "browsers"。 datalist
元素内部包含多个option
元素,每个元素代表一个预定义的选项。
当用户开始在输入字段中输入时,浏览器会显示一个下拉列表,其中包含与输入值匹配的 option
元素的值。
需要注意的是,datalist
元素并不会强制用户从下拉列表中选择。用户仍然可以输入不在列表中的值。