HTML 中的下拉列表

HTML 中的下拉清單是建立表單或顯示選擇清單的重要元素，使用者可以從中選擇一個或多個值。 HTML 中的這種選擇清單稱為下拉式清單。它是使用 建立的帶有 的標籤價值。它允許用戶根據自己的選擇選擇任何選項。當您知道選項值時，使用下拉清單始終是一個好習慣，以便可以將任何值設為預設屬性，而其他值將作為選項值。

HTML 下拉清單的語法

讓我們看看如何建立下拉清單：

文法：

<select>
<option value="">option1</option>
<option value="">option2</option>
<option value="">option3</option>
<option value="">option3</option>
</select>

範例：

<select name="color">
<option value="red">Red</option>
<option value="purple">Purple </option>
</select>

如上面的語法所示，是用來建立下拉清單的標籤。 select 標籤中包含的標籤是選擇清單的一個或多個屬性值，該值將用於顯示該選項是否已選取、停用或具有任何其他屬性。 option1,2...將是名稱。在 CSS 的幫助下，我們可以為選擇清單添加效果，能夠設定相對、絕對等位置，能夠設定寬度並執行許多其他功能。

使用程式碼設定背景顏色或懸停顏色：

.dropdown a:hover{
Background-color: color_name;
}

下拉清單的位置定義為兩個值： 位置：用於在選擇清單按鈕正下方顯示清單內容的相對值。借助位置：絕對;

Min-width 是用來為下拉清單指定特定寬度的屬性之一。我們可以透過將寬度設為100%來將其設定為與我們的下拉按鈕一樣長。上述語法是針對單一屬性選擇而定義的；現在，我們將看到如何從項目清單中選擇多個選項。

文法：

<select multiple>
<option value="">option1</option>
<option value="">option2</option>
</select>

範例：

<select name="subject" multiple>
<option value="math">Math</option>
<option value="english">English</option>
<option value="science">Science</option>
<option value="biology">Biology</option>
</select>

下拉清單在 HTML 中如何運作？

現在學習文法後，我們將了解下拉清單在 HTML 中到底如何運作。 中使用了一些屬性。標籤，如下：

1. 名稱：此屬性有助於為控制項指派名稱，該名稱將傳送至伺服器進行識別並取得所需的值。
2. Multiple：如果屬性設定為“multiple”，則使用者可以從選擇清單中選擇多個值。
3. Size： size 屬性用於定義下拉清單周圍特定大小的捲動框。它對於顯示清單中的幾個可見選項也很有幫助。
4. 值：此屬性將顯示選擇清單中的一個選項被選取。
5. 選定的屬性在頁面載入的最開始點啟用，以顯示清單中已選取的清單項目。
6. 標籤：標籤屬性是標記選項值的另一種方法。
7. 停用：如果我們想顯示帶有停用選項的下拉列表，可以在 HTML 選擇列表中使用停用屬性。
8. onChange：每當使用者要從下拉清單中選擇任何選項時，都會在選擇項目時觸發該事件。
9. onFocus：每當使用者將滑鼠懸停在選擇清單上以從清單中選擇一個選項時，都會觸發一個事件來選擇該項目。
10. 表單：此屬性用於定義與選取欄位相關的一個或多個表單。
11. 停用：我們應該藉助此屬性來保持下拉清單對使用者停用。
12. required：每當填寫某些表單時，我們希望表明在實際發送表單之前，需要此欄位從其清單中選擇任何值，因此在這種情況下，我們定義使用者需要從清單中選擇任意一個值。

HTML 程式碼範例

以下範例將顯示下拉清單的具體使用方式：

範例#1

代碼：

<title>DropDown List</title>


<h4 id="Seven-Wonders-of-the-world">Seven Wonders of the world</h4>

Taj Mahal Great Wall of China Christ the Redeemer Satue Machu Picchu Chichen Itza The Roman Colosseum Petra

上面的範例包含不同的選項，如停用、選定、必要等，這些選項顯示在輸出畫面中。  

輸出：

範例#2

代碼：

Mumbai Pune Nagpur Solapur Latur

Multiple options can be selected here .Please press ctrl key and select multiple options at a time.

<script> function multipleFunc() { document.getElementById("multiselectdd").multiple = true; } </script>

如下圖所示，從下拉清單中選擇多個選項，按給定按鈕並按 CTRL 鍵選擇多個選項。

輸出：

範例 #3

代碼：

<style>
.dropdownbtn {
background-color: black;
color: white;
padding: 12px;
font-size: 12px;
}
.dropdowndemo{
position:fixed;
display: block;
}
.dropdownlist-content {
display: none;
position: absolute;
background-color: greenyellow;
min-width: 120px;
z-index: 1;
}
.dropdownlist-content a {
color: darkblue;
padding: 14px 18px;
display: block;
}
.dropdownlist-content a:hover {background-color: lightcyan;}
.dropdowndemo:hover .dropdownlist-content {display: block;}
.dropdowndemo:hover .dropdownbtn {background-color: blue;}
</style>


<h2 id="Hover-Dropdown-Demo">Hover Dropdown Demo</h2>
<div class="dropdowndemo">
<button class="dropdownbtn">HTML forms Element</button>
<div class="dropdownlist-content">
<a href="#">Links</a>
<a href="#">Dropdown list</a>
<a href="#">Input Field</a>
<a href="#">Button</a>
<a href="#">Radio Buttons</a>
</div>
</div>

下拉清單將在懸停效果上開啟。

輸出：

結論

我們可以得出結論，下拉清單用於從選擇清單中選擇一個選項。它用於一次選擇單一或多個選項。用戶可以根據自己的選擇從清單中選擇一個選項，因此變得更加用戶友好。上面列出的屬性與選擇標籤一起使用，以透過下拉清單執行各種選擇操作。

推薦文章

這是 HTML 中的下拉清單指南。在這裡，我們討論下拉列表如何在 HTML 中工作及其程式碼實作範例。您也可以瀏覽我們的其他相關文章以了解更多資訊 –

1. HTML 樣式屬性
2. HTML 的 10 大優勢
3. HTML 框架
4. HTML 版面

以上是HTML 中的下拉列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！