HTML - option 标签

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

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

语法


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

属性

<option> 标签支持 HTML 的全局属性和事件属性。还有一些特定的属性，这些属性在下面列出：

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

<option> 标签示例

下面的示例将说明<option> 标签的用法。在哪里、何时以及如何使用<option> 来创建选项，以及我们如何使用 CSS 设置<option> 的样式。

使用<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>

<option> 标签定义<Datalist>

以下是 <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>

<option> 标签定义 <Optgroup>

在这个程序中，我们正在创建一个 HTML <option> 标签来定义包含在 HTML 中的 “outgroup” 元素中的项目。


<!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>

禁用<option> 标签

在此示例中，我们将创建一个 <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>	Yes	Yes	Yes	Yes	Yes

打印本页