資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在HTML中包含下拉列表選項？
在HTML中建立下拉列表，我們使用<select> 命令，它通常用於表單中收集使用者輸入。要提交後引用表單資料，我們使用name屬性。如果沒有name屬性，則不會有下拉列表的資料。
要將下拉列表與標籤關聯；需要id屬性。要定義下拉列表中的選項，我們必須在<select> 元素內使用<option> 標籤。
語法
以下是HTML中<select>標籤的用法：
<select name=" " id=""> <option value=" "> </option> </select>
HTML <option> 標籤還支援以下附加屬性：
屬性 |
值 |
描述 |
|---|---|---|
Disabled |
disabled |
停用輸入控制元件。按鈕不會接受使用者的更改。它也不能接收焦點，並且在按Tab鍵時會被跳過。 |
Label |
text |
標籤文字 定義使用時的標籤 |
Selected |
selected |
定義頁面載入時要選擇的預設選項。 |
值 |
text |
指定要傳送到伺服器的選項的值 |
Multiple |
multiple |
使用multiple屬性可以一次選擇多個選項。 |
Name |
name |
用於定義下拉列表中的名稱 |
Required |
required |
使用此屬性，使用者在提交表單前必須選擇一個值。 |
Size |
number |
此屬性用於定義下拉列表中可見選項的數量 |
值 |
text |
指定要傳送到伺服器的選項的值 |
Autofocus |
Autofocus |
用於在頁面載入時自動獲取下拉列表的焦點 |
示例
以下示例在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+ 次瀏覽
廣告