介绍
HTML 的 datalist
标签用于提供一个预定义的选项列表,当用户在输入框中输入时,这些选项会自动显示。本实验将教你如何使用 datalist
标签在表单中实现自动补全功能。
注意:你可以在
index.html
中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。
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>
标签和 id
属性创建一个 datalist。
<datalist id="car-brands"> </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>
通过使用 list
属性并将其值设置为 datalist 的 ID,将输入字段与 datalist 关联起来。
<input type="text" id="car-brand" list="car-brands" />
保存更改并在表单上测试多个汽车品牌的自动补全功能。
通过遵循这些简单的步骤,你可以在 HTML 代码中实现 datalist 标签,从而为表单提供自动补全功能。datalist 标签允许用户从预定义的选项列表中进行选择,同时也提供了在需要时输入预定义选项之外的值的能力。