HTML Datalist 标签

<datalist> 标签是 HTML5 中的新标签。它用于指定 <input> 元素的选项列表（即下拉列表），这样用户在填写表单时只需从列表中选择一个选项，而不需要手动输入。本文将深入介绍 <datalist> 标签的语法和用法。

语法

<datalist> 标签必须包含一个或多个 <option> 标签，每个 <option> 标签都是一个列表选项。

<datalist id="id">
  <option value="value"></option>
</datalist>

注意：<datalist> 标签是一个空标签，不能在里面添加内容。

属性

| 属性 | 描述 | | -------- | --------------------- | | id | 规定 <datalist> 的 ID | | title | 规定 <datalist> 的标题 | | hidden | 规定 <datalist> 隐藏 |

示例

下面是一个简单的示例，展示如何使用 <datalist> 标签。

<label for="browser">选择浏览器：</label>
<input list="browsers" name="browser" id="browser">

<datalist id="browsers">
  <option value="谷歌">
  <option value="火狐">
  <option value="IE">
  <option value="Safari">
  <option value="Opera">
</datalist>

注意事项

• 下拉列表中的选项可以通过键盘上下箭头进行选择。
• 如果 <input> 元素的 value 属性（即输入框中的值）与某个 <option> 元素的 value 属性一致，则该选项将被自动选中。
• 你可以在输入框中自由输入，而不受 <datalist> 中定义的选项的限制，但是如果输入框中的值与某个 <option> 元素的 value 属性一致，则该选项将被自动选中。
• <datalist> 元素不会在页面中显示，除非与 <input> 元素结合使用。
• <datalist> 标签目前还没有被所有浏览器全面支持，不过大部分主流浏览器都已支持。

本文介绍了 HTML5 新标签之一的 <datalist> 标签的简介、语法、属性、示例和注意事项。如果你想让用户更方便地填写表单，那么 <datalist> 标签就是一个很好的选择。