在HTML中建立可選擇的列表

<select>標籤用於在HTML文件中建立下拉列表。我們只需要在<select>元素中新增“multiple”屬性。現在，為了選擇多個選項，我們使用以下語法：

<select name=” “>	
   <option value=” “ > text </option>
</select>

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

屬性

值

描述

Disabled

disabled

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

Label

text

在使用<optgroup>時定義要使用的標籤。

Selected

selected

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

值

text

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

Multiple

multiple

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

Name

name

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

Required

required

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

Size

number

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

Autofocus

Autofocus

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

示例

以下是使用HTML中<select>標籤的示例：

<!DOCTYPE html>
<html>
<head>
   <title>HTML select Tag</title>
</head>
<body>
   <h1>TutorialsPoint</h1>
   <h2>selectable list in HTML</h2>
   <form action="/cgi-bin/dropdown.cgi" method="post">
      <select name="dropdown">
         <option value="Data Structures" selected>Data Structures</option>
         <option value="Data Mining">Data Mining</option>
      </select>
      <br>
      <br>
      <input type="submit" value="Submit" />
   </form>
</body>
</html>

示例

在下面的示例中，我們嘗試使用<optgroup>標籤在HTML中建立一個可選擇的列表：

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

示例

再考慮另一個例子：

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

更新於：2023年10月10日

3K+ 瀏覽量

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告