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> <label for="fruit">选择一个浏览器:</label> <input list="fruits" name="fruits" id="fruit"> <!-- 定义 datalist --> <datalist id="fruits"> <option value="Chrome"> <option value="Firefox"> <option value="Safari"> <option value="Opera"> <option value="IE"> </datalist> <input type="submit"> </body> </html>
在这个示例中：
- 我们有一个文本输入字段，其
list属性设置为 "browsers"。 - 我们有一个
datalist元素，其id为 "browsers"。 datalist元素内部包含多个option元素，每个元素代表一个预定义的选项。
当用户开始在输入字段中输入时，浏览器会显示一个下拉列表，其中包含与输入值匹配的 option 元素的值。
需要注意的是，datalist 元素并不会强制用户从下拉列表中选择。用户仍然可以输入不在列表中的值。
![[译] 以和为贵！让 ESlint、Prettier 和 EditorConfig 互不冲突](https://ucc.alicdn.com/pic/developer-ecology/hid5ykfodc62m_9ec6e758154d4d62b1e1165359209b8b.png?x-oss-process=image/format,webp/resize,h_160,m_lfit)