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

列印頁面