HTML 预定义输入选项

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

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

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_access("`Accessibility in Forms`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") html/AdvancedElementsGroup -.-> html/custom_attr("`Custom Data Attributes`") subgraph Lab Skills html/basic_elems -.-> lab-70732{{"`HTML 预定义输入选项`"}} html/forms -.-> lab-70732{{"`HTML 预定义输入选项`"}} html/form_access -.-> lab-70732{{"`HTML 预定义输入选项`"}} html/inter_elems -.-> lab-70732{{"`HTML 预定义输入选项`"}} html/custom_attr -.-> lab-70732{{"`HTML 预定义输入选项`"}} end

添加输入字段

创建一个名为 "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 标签允许用户从预定义的选项列表中进行选择,同时也提供了在需要时输入预定义选项之外的值的能力。

您可能感兴趣的其他 HTML 教程