用于为 提供下拉建议且不限制输入，需通过 list 属性与同 id 的 绑定；仅对部分 type 生效，依赖 name 属性（Chrome/Edge），不支持 label，无校验功能。
怎么让
用 就是为了解决这个问题：既提供可选提示，又允许用户自由输入任意值。它不替代 ，也不做表单校验——只是纯前端建议层。
关键点在于： 必须通过 list 属性绑定到某个 ，且两者 id 和 list 值要严格匹配。
-
中的"browsers"必须等于的id -
本身不可见，也不响应点击；只在获焦且有输入时触发建议弹出 -
浏览器仅对
type="text"、"search"、"url"、"tel"、"email"、"date"等部分类型生效（"number"和"range"通常不支持）
为什么输入后没出现下拉建议？常见失效原因
最常踩的坑不是写法错，而是隐性限制没满足：
- Chrome / Edge 要求
必须有name属性（哪怕为空），否则建议完全不触发 - Firefox 对大小写敏感：如果
，但，就匹配失败 -
必须写在内部，不能用或嵌套其他标签 - 动态插入
后，部分旧版 Chrome 不会自动监听新增节点，需聚焦再失焦一次才生效
value 和 label 怎么用
在 中只认 value 属性，label 属性会被忽略（和 不同）。显示文本和提交值都来自 value。
立即学习“前端免费学习笔记（深入）”；
例如用户输入 “ch”，匹配到 ，选中后 的值就是 "Chrome"，没有额外映射机制。
如果需要“显示名 ≠ 提交值”，得靠 JS 手动同步， 本身不支持。
兼容性和性能要注意什么
在所有现代浏览器都支持（Chrome 20+、Firefox 4+、Safari 12.1+、Edge 79+），但行为细节有差异：
- Safari 仅支持键盘方向键选择，不支持鼠标点击选项（直到 Safari 15.4 才修复）
- IE 完全不支持，必须降级为
或 JS 插件 - 大量
（如 >500 条）会导致 Chrome 下拉卡顿，建议配合 JS 懒加载或过滤 - 服务端无法直接读取
内容，所有选项必须由前端预置或 JS 注入
真正容易被忽略的是：它不阻止非法输入，也不参与表单验证。哪怕用户没从列表里选，提交的仍是手动输入的内容——后端该校验还得校验，前端别误以为加了
datalist 就安全了。 
