HTML 预定义输入选项

介绍

HTML 的 datalist 标签用于提供一个预定义的选项列表，当用户在输入框中输入时，这些选项会自动显示。本实验将教你如何使用 datalist 标签在表单中实现自动补全功能。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。

添加输入字段

创建一个名为 "index.html" 的 HTML 文件。

使用 <input> 标签在你的 HTML 文件中添加一个输入字段。

<input type="text" id="car-brand" />

创建 Datalist

使用 <datalist> 标签和 id 属性创建一个 datalist。

<datalist id="car-brands"> </datalist>

向 Datalist 添加选项

使用 <option> 标签向 datalist 添加一些选项。

<datalist id="car-brands">
  <option value="Toyota"></option>
  <option value="Honda"></option>
  <option value="BMW"></option>
  <option value="Ford"></option>
  <option value="Tesla"></option>
</datalist>

将输入字段与 Datalist 关联

通过使用 list 属性并将其值设置为 datalist 的 ID，将输入字段与 datalist 关联起来。

<input type="text" id="car-brand" list="car-brands" />

保存更改并在表单上测试多个汽车品牌的自动补全功能。

总结

通过遵循这些简单的步骤，你可以在 HTML 代码中实现 datalist 标签，从而为表单提供自动补全功能。datalist 标签允许用户从预定义的选项列表中进行选择，同时也提供了在需要时输入预定义选项之外的值的能力。