定义和用法
<datalist>标签允许你为输入字段提供预定义的选项列表，同时仍然允许用户输入自定义值。
<datalist>标签需要与<input>元素一起使用，通过 list 属性将两者关联起来。
<datalist>元素的基本语法：
<label for="browser">选择你常用的浏览器：</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>使用实例
接下来用多种实例演示<datalist>标签的用法，来深化您对<datalist>的理解。
1. 城市选择器
<label for="city">选择城市：</label>
<input list="cities" id="city" name="city">
<datalist id="cities">
<option value="北京">
<option value="上海">
<option value="广州">
<option value="深圳">
<option value="杭州">
<option value="成都">
</datalist>2. 带标签的选项
<label for="product">选择产品：</label>
<input list="products" id="product" name="product">
<datalist id="products">
<option value="P001" label="iPhone 13">
<option value="P002" label="MacBook Pro">
<option value="P003" label="iPad Air">
<option value="P004" label="Apple Watch">
</datalist>3. 数字范围选择
<label for="volume">音量控制：</label>
<input type="range" list="volsettings" id="volume" name="volume" min="0" max="100">
<datalist id="volsettings">
<option value="0" label="静音">
<option value="25">
<option value="50" label="50%">
<option value="75">
<option value="100" label="最大">
</datalist>与 <select> 的区别
| 特性 | <datalist> | <select> |
|---|---|---|
| 是否允许自定义输入 | 是 | 否 |
| 选项是否必须选择 | 否 | 是 |
| 多选支持 | 否 | 是（使用 multiple） |
| 移动设备支持 | 较好 | 优秀 |
全局属性
<datalist>标签还支持 HTML 中的全局属性。
事件属性
<datalist>标签还支持 HTML 中的事件属性。
默认的 CSS 设置
大多数浏览器将使用以下默认值显示<datalist>元素：
datalist {
display: none;
}注意事项
- 始终为
<datalist>提供有意义的 id。 - 确保 input 的 list 属性与 datalist 的 id 匹配。
- 为重要的选项添加 label 属性以提高可用性。
- 考虑为不支持
<datalist>的浏览器提供备用方案。
浏览器支持
 |
 |
 |
 |
 |
| 支持 | 支持 | 支持 | 支持 | 支持 |
评论区 0
发表评论
教程介绍
HTML 参考手册涵盖 HTML 元素、属性、事件等详细解析，助您快速检索 HTML 使用方法 。
50
章节
62
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈