HTML - <option> 标签

HTML <option> 标签用于定义自动完成的数据列表项（由 <datalist> 标签指定）或由 <select> 标签定义的下拉列表项。

组织这些项的<select> 标签、<datalist> 标签或<optgroup> 标签可以使用 <option> 标签作为子元素。如果需要将数据列表传递到服务器或脚本需要访问数据列表，则将 <option> 标签添加到 <form> 标签中。

语法

<option>.......</option>

属性

HTML option 标签支持HTML的全局和事件属性，以及下面列出的一些特定属性。

属性	值	描述
disabled	disabled	禁用输入控件。按钮将不接受用户的更改。它也不能接收焦点，并且在按 Tab 键时会被跳过。
label	文本	在使用 <optgroup> 时定义要使用的标签。
selected	selected	定义页面加载时要选择的默认选项。
value	文本	指定要发送到服务器的选项的值。

HTML option 标签示例

下面的示例将说明 option 标签的用法、何时以及如何使用它来创建选项以及如何使用 CSS 对这些选项进行样式设置。

使用 option 标签创建选项项

在下面的程序中，我们使用 HTML <option> 标签来定义 HTML 中 "select" 元素包含的项。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML option tag</title>
</head>
<body>
   <!--create an option tag-->
   <select name="" id="">
      <option value="">Choose your option</option>
      <option value="html">HTML</option>
      <option value="css">CSS</option>
      <option value="javascript">JavaScript</option>
   </select>
</body>
</html>

数据列表中的选项项

以下是 HTML <option> 标签的另一个示例。在这里，我们使用 "option" 元素（标签）来定义 HTML 中 "datalist" 元素包含的项。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML option tag</title>
</head>
<body>
   <!--create an option tag-->
   <p>The "option" tag with the "datalist" element</p>
   <input type="text" list="colors">
   <datalist id="colors">
      <option value="red"></option>
      <option value="blue"></option>
      <option value="green"></option>
      <option value="yellow"></option>
   </datalist>
</body>
</html>

选项组中的选项项

在这个程序中，我们创建了一个 HTML <option> 标签来定义 HTML 中 "optgroup" 元素包含的项。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>HTML option tag</title>
</head>
<body>
   <!--create an option tag-->
   <p>The "option" tag with "select" and "optgroup" element</p>
   <select>
      <optgroup label="Colors">
         <option value='red'>Red</option>
         <option value="green">Green</option>
         <option value="yellow">Yellow</option>
         <option value="blue">Blue</option>
      </optgroup>
      <optgroup label="Fruits">
         <option value="apple">Apple</option>
         <option value="banana">Banana</option>
         <option value="orange">Orange</option>
         <option value="grapes">Grapes</option>
      </optgroup>
   </select>
</body>
</html>

禁用选项项

在这个示例中，我们创建了一个 HTML <option> 标签来定义 "select" 元素中包含的项。然后，我们使用 "disabled" 属性来禁用该选项。使用 CSS 对 option 标签进行样式设置。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML option tag</title>
   <style>
      select {
         width: 200px;
      }

      option {
         background-color: rgb(141, 141, 141);
         color: blue;
      }
   </style>
</head>
<body>
   <!-- create an option tag-->
   <p>The "option" tag with "select" element</p>
   <select>
      <option value='red' disabled>Red</option>
      <option value="green">Green</option>
      <option value="yellow">Yellow</option>
      <option value="blue">Blue</option>
   </select>
</body>
</html>

支持的浏览器

标签
option	是	是	是	是	是

html_tags_reference.htm

打印页面