HTML表单datalist标签怎么用_HTMLdatalist输入建议标签的创建与使用

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

HTML表单datalist标签怎么用_HTMLdatalist输入建议标签的创建与使用

2025-11-20

浏览次数：次

返回列表

datalist标签用于为输入框提供可选建议，提升表单填写效率。通过为datalist设置id并由input的list属性关联，内部用option定义建议项，用户输入时自动匹配显示，如浏览器或城市搜索示例，支持text、search等类型，注意id匹配和浏览器兼容性，移动端可能隐藏下拉箭头，但提示功能仍可用。

html表单datalist标签怎么用_htmldatalist输入建议标签的创建与使用

HTML中的datalist标签用于为输入框提供可选的预设建议列表，用户可以在输入时看到匹配的选项，提升填写表单的效率和准确性。它不强制用户选择，而是作为提示存在，结合input元素使用。

创建 datalist 输入建议列表

要使用datalist，先定义一个datalist元素，并为其设置唯一id，然后在input中通过list属性关联该id。

每个建议项用option标签表示，放在datalist内部。

示例：

<label>你喜欢的浏览器：
  <input type="text" list="browsers" name="browser">
</label>

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
  <option value="Opera">
</datalist>

当用户在输入框中打字时，浏览器会自动筛选显示匹配的option值。

结合其他 input 类型使用

datalist不仅适用于文本输入，也可用于type="number"、type="range"等类型，但最常见的是搭配type="text"或type="search"。

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

例如搜索常用城市：

<input type="search" list="cities" placeholder="输入城市名称">
<datalist id="cities">
  <option value="北京">
  <option value="上海">
  <option value="广州">
  <option value="深圳">
  <option value="杭州">
</datalist>

用户开始输入时，会弹出匹配的城市名供参考。