資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學在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+ 瀏覽量
廣告