HTML中option标签详解(定义、属性、示例代码)

来源：聚合数据类型：技术文章发布：2025-08-13 16:38:03

在HTML表单中，<option>标签起着至关重要的作用。它用于定义下拉列表、单选框或多选框中的选项。通过合理运用<option>标签，开发者能够为用户提供丰富多样的选择，从而增强表单的交互性和实用性。本文将详细介绍<option>标签的定义、属性以及提供示例代码，帮助读者深入理解和运用该标签。

一、<option>标签的定义

<option>标签是HTML表单元素<select>的子元素，用于创建下拉菜单、单选框或多选框中的具体选项。当用户在<select>元素中进行选择时，<option>标签所定义的内容将作为可选值呈现给用户。例如，在一个选择国家的下拉菜单中，每个国家名称都可以通过<option>标签来定义。

二、<option>标签的属性

value属性

value属性用于指定<option>标签的值。当表单提交时，该值将被发送到服务器。例如：

<select>
  <option value="China">中国</option>
  <option value="USA">美国</option>
</select>

在上述代码中，“中国”选项的值为“China”，“美国”选项的值为“USA”。当表单提交时，所选选项的值将被发送到服务器进行处理。

selected属性

selected属性是一个布尔属性。如果设置了该属性，则该<option>标签所代表的选项在页面加载时将被默认选中。例如：

<select>
  <option value="China">中国</option>
  <option value="USA" selected>美国</option>
</select>

这里“美国”选项被设置为默认选中状态。

disabled属性

disabled属性也是一个布尔属性。当设置该属性时，<option>标签所代表的选项将被禁用，用户无法选择它。例如：

<select>
  <option value="China">中国</option>
  <option value="USA" disabled>美国</option>
</select>

此时“美国”选项不可选。

label属性

label属性用于为<option>标签提供一个更具描述性的文本标签。它主要用于辅助屏幕阅读器等辅助技术，帮助用户更好地理解选项的含义。例如：

<select>
  <option value="China" label="中华人民共和国">中国</option>
  <option value="USA" label="美利坚合众国">美国</option>
</select>

这里“中华人民共和国”和“美利坚合众国”分别是“中国”和“美国”选项的label属性值。

三、<option>标签的示例代码

简单的下拉菜单示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF - 8">
  <title>下拉菜单示例</title>
</head>
<body>
  <select>
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
  </select>
</body>
</html>

在这个示例中，创建了一个简单的下拉菜单，包含三个选项。用户可以选择其中一个选项，所选选项的值将在表单提交时发送到服务器。

带有默认选中项的下拉菜单

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF - 8">
  <title>默认选中下拉菜单示例</title>
</head>
<body>
  <select>
    <option value="option1">选项1</option>
    <option value="option2" selected>选项2</option>
    <option value="option3">选项3</option>
  </select>
</body>
</html>

此示例中，“选项2”被设置为默认选中状态，页面加载时该选项将突出显示。

禁用选项的下拉菜单

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF - 8">
  <title>禁用选项下拉菜单示例</title>
</head>
<body>
  <select>
    <option value="option1">选项1</option>
    <option value="option2" disabled>选项2</option>
    <option value="option3">选项3</option>
  </select>
</body>
</html>

这里“选项2”被禁用，用户无法选择它。

带有label属性的下拉菜单

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF - 8">
  <title>带有label属性下拉菜单示例</title>
</head>
<body>
  <select>
    <option value="option1" label="第一个可选项">选项1</option>
    <option value="option2" label="第二个可选项">选项2</option>
    <option value="option3" label="第三个可选项">选项3</option>
  </select>
</body>
</html>

通过label属性为每个选项提供了更详细的描述，有助于提高表单的可用性。

<option>标签是HTML表单中不可或缺的一部分，它为用户提供了丰富的选择方式。通过合理运用其value、selected、disabled和label等属性，开发者能够创建出功能强大、用户体验良好的表单。无论是简单的下拉菜单，还是需要特殊设置如默认选中、禁用选项或提供详细描述的表单场景，<option>标签都能满足需求。希望本文对<option>标签的详细介绍能够帮助读者在实际开发中更加熟练地运用该标签，提升HTML表单的质量和交互性。

声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com

API百科

生活服务企业工商金融科技接口大全电子商务

API资讯