HTML 中的下拉列表-html教學-PHP中文網

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%來將其設定為與我們的下拉按鈕一樣長。上述語法是針對單一屬性選擇而定義的；現在，我們將看到如何從項目清單中選擇多個選項。

文法：

<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 中到底如何運作。

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

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>

登入後複製

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

輸出：

HTML 中的下拉列表

範例#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 鍵選擇多個選項。

輸出：

HTML 中的下拉列表

範例 #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>

登入後複製

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

輸出：

HTML 中的下拉列表