在HTML表单中，<option>标签起着至关重要的作用。它用于定义下拉列表、单选框或多选框中的选项。通过合理运用<option>标签，开发者能够为用户提供丰富多样的选择，从而增强表单的交互性和实用性。本文将详细介绍<option>标签的定义、属性以及提供示例代码，帮助读者深入理解和运用该标签。
<option>标签是HTML表单元素<select>的子元素，用于创建下拉菜单、单选框或多选框中的具体选项。当用户在<select>元素中进行选择时，<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属性值。
简单的下拉菜单示例
<!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
分享
提供多种拟人音色，支持多语言及方言，并可在同一音色下输出多语言内容。系统可自适应语气，流畅处理复杂文本。
Nano Banana（gemini-2.5-flash-image 和 gemini-3-pro-image-preview图像模型）是图像生成与编辑的最佳选择，可集成 Nano Banana API，实现高速预览。
支持通过自然语言文本智能生成高质量短视频。用户只需输入一段描述性文字，即可自动合成画面连贯、风格鲜明、配乐匹配的定制化视频内容。适用于短视频创作、广告预演、社交内容生成、游戏素材制作等场景，为开发者与创作者提供高效、灵活、富有想象力的视频生产新范式。
先进的图像理解和分析能力，它能够快速准确地解析和理解图像内容。无论是自然风景、城市建筑还是复杂的场景与活动，都能提供详细的描述和深入的分析。
根据文本提示（prompt）和图片公网访问链接,编辑原图按照特定风格、场景和氛围感的输出新的图像。广泛应用于电商营销、广告设计、创意灵感等领域，为用户带来高效且个性化的AI图像创作体验。
苏公网安备 32059002001776号
