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>
如上面的語法所示，是用來建立下拉清單的標籤。
使用程式碼設定背景顏色或懸停顏色：
.dropdown a:hover{
Background-color: color_name;
}
下拉清單的位置定義為兩個值： 位置：用於在選擇清單按鈕正下方顯示清單內容的相對值。借助位置：絕對;
Min-width 是用來為下拉清單指定特定寬度的屬性之一。我們可以透過將寬度設為100%來將其設定為與我們的下拉按鈕一樣長。上述語法是針對單一屬性選擇而定義的；現(xiàn)在，我們將看到如何從項目清單中選擇多個選項。
文法：
<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 中如何運作？
現(xiàn)在學習文法後，我們將了解下拉清單在 HTML 中到底如何運作。
-
名稱：此屬性有助於為控制項指派名稱，該名稱將傳送至伺服器進行識別並取得所需的值。
-
Multiple：如果屬性設定為“multiple”，則使用者可以從選擇清單中選擇多個值。
-
Size： size 屬性用於定義下拉清單周圍特定大小的捲動框。它對於顯示清單中的幾個可見選項也很有幫助。
-
值：此屬性將顯示選擇清單中的一個選項被選取。
- 選定的屬性在頁面載入的最開始點啟用，以顯示清單中已選取的清單項目。
-
標籤：標籤屬性是標記選項值的另一種方法。
-
停用：如果我們想顯示帶有停用選項的下拉列表，可以在 HTML 選擇列表中使用停用屬性。
-
onChange：每當使用者要從下拉清單中選擇任何選項時，都會在選擇項目時觸發(fā)該事件。
-
onFocus：每當使用者將滑鼠懸停在選擇清單上以從清單中選擇一個選項時，都會觸發(fā)一個事件來選擇該項目。
-
表單：此屬性用於定義與選取欄位相關的一個或多個表單。
-
停用：我們應該藉助此屬性來保持下拉清單對使用者停用。
-
required：每當填寫某些表單時，我們希望表明在實際發(fā)送表單之前，需要此欄位從其清單中選擇任何值，因此在這種情況下，我們定義使用者需要從清單中選擇任意一個值。
HTML 程式碼範例
以下範例將顯示下拉清單的具體使用方式：
範例#1
代碼：
<head>
<title>DropDown List</title>
</head>
<body>
<h4>Seven Wonders of the world</h4>
<form>
<select name = "dropdown">
<option value = "taj" selected>Taj Mahal</option>
<option value = "china">Great Wall of China</option>
<option value = "chirst" required>Christ the Redeemer Satue</option>
<option value = "machu" disabled>Machu Picchu</option>
<option value = "chichen">Chichen Itza</option>
<option value = "colossem">The Roman Colosseum</option>
<option value = "petra">Petra</option>
</select>
</form>
</body>
上面的範例包含不同的選項，如停用、選定、必要等，這些選項顯示在輸出畫面中。 ?
輸出：
範例#2
代碼：
<html>
<body>
<form id="dropdowndemo">
<select id="multiselectdd">
<option>Mumbai</option>
<option>Pune</option>
<option>Nagpur</option>
<option>Solapur</option>
<option>Latur</option>
</select>
<input type="button" onclick="multipleFunc()" value="Select multiple options">
</form>
<p>Multiple options can be selected here .Please press ctrl key and select multiple options at a time. </p>
<script>
function multipleFunc() {
document.getElementById("multiselectdd").multiple = true;
}
</script>
</body>
</html>
如下圖所示，從下拉清單中選擇多個選項，按給定按鈕並按 CTRL 鍵選擇多個選項。
輸出：
範例 #3
代碼：
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<h2>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>
</body>
</html>
下拉清單將在懸停效果上開啟。
輸出：
結論
我們可以得出結論，下拉清單用於從選擇清單中選擇一個選項。它用於一次選擇單一或多個選項。用戶可以根據自己的選擇從清單中選擇一個選項，因此變得更加用戶友好。上面列出的屬性與選擇標籤一起使用，以透過下拉清單執(zhí)行各種選擇操作。
推薦文章
這是 HTML 中的下拉清單指南。在這裡，我們討論下拉列表如何在 HTML 中工作及其程式碼實作範例。您也可以瀏覽我們的其他相關文章以了解更多資訊 –
- HTML 樣式屬性
- HTML 的 10 大優(yōu)勢
- HTML 框架
- HTML 版面
以上是HTML 中的下拉列表的詳細內容。更多資訊請關注PHP中文網其他相關文章！