HTML 下拉列表

HTMLHTMLBeginner
立即练习

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

介绍

HTML Select 元素用于创建一个下拉列表,允许用户从给定的列表中选择一个或多个选项。在本实验中,你将学习如何使用 HTML Select 标签创建一个供用户选择的项目列表。

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/FormsandInputGroup(["`Forms and Input`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/FormsandInputGroup -.-> html/forms("`Form Elements`") html/FormsandInputGroup -.-> html/form_group("`Grouping 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/forms -.-> lab-70833{{"`HTML 下拉列表`"}} html/form_group -.-> lab-70833{{"`HTML 下拉列表`"}} html/form_access -.-> lab-70833{{"`HTML 下拉列表`"}} html/inter_elems -.-> lab-70833{{"`HTML 下拉列表`"}} html/custom_attr -.-> lab-70833{{"`HTML 下拉列表`"}} end

创建 Select 元素

要创建一个 select 元素,我们使用带有开始和结束标签的 HTML Select 标签。以下是一个创建简单 select 元素的示例。

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

上面的代码创建了一个包含四个选项的简单 select 元素:Volvo、Saab、Opel 和 Audi。

为 Select 元素添加属性

我们可以为 Select 元素添加属性,使其对用户更具交互性。以下是 HTML Select 元素的一些重要属性。

A: Size 属性

size 属性指定一次可见的选项数量。以下是一个示例:

<select size="3">
  <!-- 默认显示三个选项 -->
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>
B: Name 属性

name 属性为 select 元素分配一个名称。以下是一个示例:

<select name="city">
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>
C: Multiple 属性

multiple 属性允许用户同时选择多个选项。以下是一个示例:

<select multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

定义选项

你可以使用 option 标签向 select 元素添加任意数量的选项。以下是一个示例:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

如你所见,我们定义了四个选项,每个选项都有一个 value 属性。value 属性可用于将每个选项与唯一的值关联起来。

使用分组选项

你可以使用 <optgroup> 标签将选项分组。这会使你的 select 元素更有组织性和可读性。以下是使用分组选项的方法:

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

创建默认值

你可以指定一个默认值,该值将在页面加载时显示。以下是设置默认值的方法:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option selected value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

在这个示例中,"Opel" 选项将默认被选中。

总结

在本实验中,你学习了如何使用 HTML Select 标签创建下拉列表、可以与 Select 标签一起使用的不同属性、如何定义选项、使用分组选项以及创建默认值。通过这些技能,你应该能够创建更高级的 select 元素,帮助用户更轻松地与你的网站进行交互。

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