HTML 中的選擇標簽可以從選項列表中實現(xiàn)選擇功能,例如下拉菜單或多選菜單。它是一個可以在用于創(chuàng)建和實現(xiàn)網(wǎng)頁的 HTML 代碼形式內(nèi)使用的標簽。語法類似于“,其中列表中的每個項目都將由選項標記括起來,并允許用戶選擇功能。為了方便其他選擇方法,如 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>
最重要的用途之一是標簽是在列表中創(chuàng)建一個選項組。它將創(chuàng)建多個選項作為一個組,并且組標題將以粗體標題顯示。
其語法如下:
<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>
自動對焦:我們可以一次關(guān)注列表中的一個特定選項,如下所示。在一頁中只能使用一次自動對焦。
<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>
占位符:我們知道,如果使用選擇標簽,那么它會將第一個選項視為默認選項,但如果我們想將某些選項顯示為默認選項,那么我們可以設(shè)置選定的關(guān)鍵字具體選項如下:
<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
列表中有多個選項,但它會根據(jù)定義的大小顯示選項。
代碼
<!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>
輸出:

結(jié)論
HTML 中的 select 標簽顯示選擇列表,用于從列表中選擇一個或多個選項。 標簽可以與選定、必需、禁用、必需、自動填充、自動對焦、鏈接、大小、多個、占位符、optgroup 等值一起使用。
以上是選擇 HTML 中的標簽的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!