如何在HTML中新增下拉列表選項？

在HTML中建立下拉列表，我們使用<select> 命令，它通常用於表單中收集使用者輸入。要提交後引用表單資料，我們使用name屬性。如果沒有name屬性，則不會有下拉列表的資料。

要將下拉列表與標籤關聯；需要id屬性。要在下拉列表中定義選項，我們必須在<select>元素內使用<option> 標籤。

語法

以下是HTML中<select>標籤的用法：

<select name=" " id="">
   <option value=" ">
   </option>
</select>

HTML <option>標籤還支援以下附加屬性：

屬性

值

描述

停用

disabled

停用輸入控制元件。按鈕將不會接受使用者的更改。它也不能接收焦點，並且在按Tab鍵時會被跳過。

標籤

文字

標籤文字 定義使用時的標籤.

選中

selected

定義頁面載入時要選擇的預設選項。

值

文字

指定要傳送到伺服器的選項的值

多選

multiple

使用multiple屬性可以一次選擇多個選項。

名稱

name

用於在下拉列表中定義名稱

必填

required

使用此屬性，使用者必須在提交表單之前選擇一個值。

尺寸

數字

此屬性用於定義下拉列表中可見選項的數量

值

文字

指定要傳送到伺服器的選項的值

自動聚焦

自動聚焦

用於在頁面載入時自動獲取下拉列表的焦點

示例

以下示例在HTML中向下拉列表新增選項：

<!DOCTYPE html>
<html>
<body>
   <h1>Drop-Down List using Select Command</h1>
   <p>The select element is used to create a drop-down list.</p>
   <form method="get" action="#">
      <label for="cities"> Choose City:</label>
      <select name="cities" id="cities">
         <option value="hyd">Hyderabad</option>
         <option value="Chennai">Chennai</option>
         <option value="bang">Banglore</option>
         <option value="Mumbai">Mumbai</option>
      </select>
      <br>
      <br>
      <input type="submit" value="Choose city">
   </form>
</body>
</html>

示例

以下另一個示例演示了<option>標籤的不同屬性的用法。

<!DOCTYPE html>
<html>
<head>
   <title>Form Validation</title>
</head>
<body>
   <h1> Form Validation </h1>
   <form>
      <label>Choose validation option:</label>
      <select name="credentials" id="credentials" onchange="displayField()">
         <option value="select">Select</option>
         <option value="pwd">Password Validation</option>
         <option value="pin">Pin Validation</option>
         <option value="mob">Mobile Validation</option>
      </select>
      <br />
      <br />
      <div id="1" hidden>
         <label>Enter your password: </label>
         <input type="text" id="pwd" />
      </div>
      <div id="2" hidden>
         <label>Enter your pin: </label>
         <input type="number" id="pin" />
      </div>
      <div id="3" hidden>
         <label>Enter your mobile number: </label>
         <input type="number" id="mob" />
      </div>
      <button onclick="validate()" />OK</button>
   </form>
</body>
</html>

示例

在以下示例中，我們嘗試使用<select>標籤和<optgroup>標籤在列表中新增選項：

<!DOCTYPE html>
<html>
<body>
   <h1>Inserting optgroup in select element</h1>
   <p>It is used to group related options in a drop-down list:</p>
   <form action="/action_page.php">
      <label for="class">Choose Grade:</label>
      <select name="class" id="class">
         <optgroup label="Grade 1">
            <option value="A">A Section</option>
            <option value="B">B Section</option>
            <option value="C">C Section</option>
         </optgroup>
         <optgroup label="Grade 2">
            <option value="A">A Section</option>
            <option value="B">B Section</option>
            <option value="C">C Section</option>
         </optgroup>
      </select>
      <br>
      <br>
      <input type="submit" value="Submit">
   </form>
</body>
</html>

更新於：2023年11月18日

1K+ 次瀏覽

開啟您的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.