選擇 HTML 中的標籤
- 王林原創
- 2024-09-04 16:28:11309瀏覽
HTML 中的選擇標籤可以從選項清單中實現選擇功能，例如下拉式選單或多選選單。它是一個可以在用於建立和實作網頁的 HTML 程式碼形式內使用的標籤。語法類似於「，其中清單中的每個項目都將由選項標記括起來，並允許使用者選擇功能。為了方便其他選擇方法，如 opt group 和多重選擇，
HTML 中選擇標籤的語法
選擇標籤可以使用；標籤。
該標籤的語法如下：
<select> <option> Value </option> <option> Value </option> </select>
上面的語法
使用
將如下：
<select multiple> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> </select>
其文法如下：
<select > <optgroup label = "labelname"> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <optgroup> </select>
size: 上面的語法也可以定義尺寸，這樣它就只顯示定義的尺寸
只有這樣的選項：
<select value="" size="4"> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> </select>
自動填入： 選擇標籤也用於自動填入欄位值，如下所示：
<select > <option value=" " autocomplete="off"> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> </select>
自動對焦：我們可以一次關注清單中的一個特定選項，如下所示。一頁只能使用一次自動對焦。
<select autofocus> <option value=" "> Content Name </option> <option value=" "> Content Name </option> <option value=" "> Content Name </option> </select>
link: Select 標籤用於透過指定選項打開表單鏈接，語法如下：
<form action="" id="name"> </form> <Select name="" form="Id_name"> <option value=" "> Content Name </option> </select>
必要：選擇標籤中的此選項定義了實際提交表單之前定義清單中的強制選項。
<select name="value" required> <option value=" "> Content Name </option> <option value=" "> Content Name </option> </select>
佔位符：我們知道，如果使用選擇標籤，那麼它會將第一個選項視為預設選項，但如果我們想將某些選項顯示為預設選項，那麼我們可以設定選定的關鍵字具體選項如下：
<select name="value" > <option value=" "> Content Name </option> <option value=" " selected> Content Name </option> </select>
停用：選擇標籤中還有一個有用的技巧，以停用格式顯示選項，如下所示：
使用這個可以顯示選項，但無法採取任何動作。
<select name="value" > <option value=" " disabled> Content Name </option> <option value=" "> Content Name </option> </select>
HTML 中選擇標籤的範例
以下是下面提到的以下範例。
範例#1
在此範例中，我們將顯示一個簡單的選擇標籤作為選擇清單、optgroup，並用於一次選擇多個選項，如下所示：
代碼
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.div-container {
display: table;
width: 100%;
}
.block {
display: table-cell;
padding: 10px;
}
</style>
</head>
<body>
<div class="div-container">
<div class="block">
<h4>Simple Select tag </h4>
<select name="Web Languages">
<option> HTML 5 </option>
<option> CSS 3</option>
<option> Bootstrap </option>
<option>Angular </option>
<option> React JS </option>
<option> Vue JS</option>
<option>Python </option>
<option>PHP</option>
</select> <br>
</div>
<div class="block" >
<h4>Optgroup Select tag </h4>
<select>
<optgroup label="2 wheeler">
<option value="Honda">Shine</option>
<option value="Suzuki">Access</option>
</optgroup>
<optgroup label="4 wheeler">
<option value="m">Mercedes</option>
<option value="o">Audi</option>
</optgroup>
</select>
</div>
<div class="block" >
<h4>Multiple Selection in Select tag </h4>
<select multiple>
<option> Green </option>
<option> Orange</option>
<option> Blue </option>
<option>Red </option>
<option> Yellow </option>
</select>
</div>
</div>
</body>
</html>
輸出：
範例#2
此範例定義如何透過
代碼
<!DOCTYPE html> <html> <head> <title>select Tag form link</title> </head> <body> <form action = "C:\Users\Sonali\Desktop\HTML colspan.html" method = "post"> <select name = "list"> <option value = "menu 1">Colspan tag</option> <option value = "menu 2" selected>Font Tag</option> </select> <input type = "submit" value = "Submit" /> </form> </body> </html>
輸出：選擇 Colspan 標籤值並使用提交按鈕選擇它後，清單將開啟連結的表單。
範例 #3
清單中有多個選項，但它會根據定義的大小顯示選項。
代碼
<!DOCTYPE html> <html> <head> <title>select Tag form link</title> </head> <body> <select name = "places" size="5"> <option>Aurangabad</option> <option>Beed</option> <option>Chennai</option> <option>Delhi</option> <option >Egatpuri</option> <option >Firozabad</option> <option >Fatimpur</option> <option >Goa</option> <option >Harihareshwar</option> <option >Indonesia</option> <option >Japan</option> <option >Kolkata</option> <option >Latur</option> <option >Mumbai</option> <option >Nagpur</option> <option >Oty</option> <option >Pune</option> <option >Qatar</option> <option >Raipur</option> <option >Sholapur</option> <option >Tamil Nadu</option> <option >Uttarakhand</option> </select> </body> </html>
輸出：
結論
HTML 中的 select 標籤顯示選擇列表，用於從列表中選擇一個或多個選項。 標籤可以與選定、必要、停用、必要、自動填入、自動對焦、連結、大小、多個、佔位符、optgroup 等值一起使用。
以上是選擇 HTML 中的標籤的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：HTML 中的字型標籤下一篇：HTML 中的字型標籤