HTML表单datalist标签怎么用_HTMLdatalist输入建议标签的创建与使用-html教程-PHP中文网

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

蓮花仙者

发布： 2025-11-20 22:07:02

原创

692人浏览过

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"。

幻舟AI

专为短片创作者打造的AI创作平台

279

查看详情

例如搜索常用城市：

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

登录后复制

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