HTML 中的選擇標(biāo)簽可以從選項(xiàng)列表中實(shí)現(xiàn)選擇功能,例如下拉菜單或多選菜單。它是一個(gè)可以在用于創(chuàng)建和實(shí)現(xiàn)網(wǎng)頁(yè)的 HTML 代碼形式內(nèi)使用的標(biāo)簽。語(yǔ)法類似于“,其中列表中的每個(gè)項(xiàng)目都將由選項(xiàng)標(biāo)記括起來(lái),并允許用戶選擇功能。為了方便其他選擇方法,如 opt group 和多重選擇,
HTML 中選擇標(biāo)簽的語(yǔ)法
選擇標(biāo)簽可以使用;標(biāo)簽。
該標(biāo)簽的語(yǔ)法如下:
<select>
<option> Value? </option>
<option> Value? </option>
</select>
上面的語(yǔ)法
使用
將如下:
<select multiple>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>
最重要的用途之一是標(biāo)簽是在列表中創(chuàng)建一個(gè)選項(xiàng)組。它將創(chuàng)建多個(gè)選項(xiàng)作為一個(gè)組,并且組標(biāo)題將以粗體標(biāo)題顯示。
其語(yǔ)法如下:
<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: 上面的語(yǔ)法也可以定義尺寸,以便它只顯示定義的尺寸
只有這樣的選項(xiàng):
<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>
?自動(dòng)填充: 選擇標(biāo)簽也用于自動(dòng)填充字段值,如下所示:
<select >
<option value=" " autocomplete="off"> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>
自動(dòng)對(duì)焦:我們可以一次關(guān)注列表中的一個(gè)特定選項(xiàng),如下所示。在一頁(yè)中只能使用一次自動(dòng)對(duì)焦。
<select autofocus>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>
link: Select 標(biāo)簽用于通過指定選項(xiàng)打開表單鏈接,語(yǔ)法如下:
<form action="" id="name">
</form>
<Select name="" form="Id_name">
<option value=" "> Content Name </option>
</select>
?必需:選擇標(biāo)簽中的此選項(xiàng)定義了實(shí)際提交表單之前定義列表中的強(qiáng)制選項(xiàng)。
<select name="value" required>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>
占位符:我們知道,如果使用選擇標(biāo)簽,那么它會(huì)將第一個(gè)選項(xiàng)視為默認(rèn)選項(xiàng),但如果我們想將某些選項(xiàng)顯示為默認(rèn)選項(xiàng),那么我們可以設(shè)置選定的關(guān)鍵字具體選項(xiàng)如下:
<select name="value" >
<option value=" "> Content Name </option>
<option value=" " selected> Content Name </option>
</select>
禁用:選擇標(biāo)簽中的另一個(gè)有用技巧,以禁用格式顯示選項(xiàng),如下所示:
使用這個(gè)可以顯示選項(xiàng),但無(wú)法采取任何操作。
<select name="value" >
<option value=" " disabled> Content Name </option>
<option value=" "> Content Name </option>
</select>
HTML 中選擇標(biāo)簽的示例
以下是下面提到的以下示例。
示例#1
在此示例中,我們將顯示一個(gè)簡(jiǎn)單的選擇標(biāo)簽作為選擇列表、optgroup,并用于一次選擇多個(gè)選項(xiàng),如下所示:
代碼
<!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
此示例定義了如何通過 從鏈接中打開標(biāo)簽
代碼
<!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 標(biāo)簽值并使用提交按鈕選擇它后,列表將打開鏈接的表單。


示例#3
列表中有多個(gè)選項(xiàng),但它會(huì)根據(jù)定義的大小顯示選項(xiàng)。
代碼
<!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 標(biāo)簽顯示選擇列表,用于從列表中選擇一個(gè)或多個(gè)選項(xiàng)。 標(biāo)簽可以與選定、必需、禁用、必需、自動(dòng)填充、自動(dòng)對(duì)焦、鏈接、大小、多個(gè)、占位符、optgroup 等值一起使用。
以上是選擇 HTML 中的標(biāo)簽的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!