HTML の選択タグを使用すると、ドロップダウン メニューや複數(shù)選択メニューなどのオプションのリストからの選択機(jī)能が有効になります。 Webページの作成や実裝に使用するHTMLコードのフォーム內(nèi)で使用できるタグです。構(gòu)文は「。リスト內(nèi)の各項目はオプション タグで囲まれ、ユーザー選択機(jī)能が可能になります。 opt グループや複數(shù)選択などの他の選択方法を容易にするために、
HTML の選択タグの構(gòu)文
選択タグでは を使用できます。タグ。
このタグの構(gòu)文は次のとおりです:
<select>
<option> Value? </option>
<option> Value? </option>
</select>
上記の構(gòu)文
次のようになります:
<select multiple>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>
の最も重要な使用法の 1 つです。タグは、リストにオプション グループを作成するためのものです。複數(shù)のオプションをグループとして作成し、グループの見出しが太字の見出しで表示されます。
この構(gòu)文は次のとおりです:
<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: 上記の構(gòu)文では、定義されたサイズのみを表示するようにサイズを定義することもできます
これのみのオプションは次のとおりです:
<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>
autofill: 次のように、フィールド値への自動入力にも使用される選択タグ:
<select >
<option value=" " autocomplete="off"> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>
autofocus: 次のように、リストから一度に 1 つの特定のオプションに焦點を當(dāng)てることができます。 1 つのページに使用できるオートフォーカスは 1 つだけです。
<select autofocus>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>
link: 選択タグは、次の構(gòu)文で定義されている指定されたオプションを通じてフォーム リンクを開くために使用されます:
<form action="" id="name">
</form>
<Select name="" form="Id_name">
<option value=" "> Content Name </option>
</select>
必須: select タグ內(nèi)のこのオプションは、フォームを?qū)g際に送信する前に、定義されたリストから必須のオプションを定義します。
<select name="value" required>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>
プレースホルダー: ご存知のとおり、選択ラベルを使用する場合、最初のオプションがデフォルトのオプションとして考慮されますが、いくつかのオプションをデフォルトとして表示したい場合は、選択されたキーワードを設(shè)定できます。次のように特定のオプションに追加します:
<select name="value" >
<option value=" "> Content Name </option>
<option value=" " selected> Content Name </option>
</select>
無効: 次のように無効な形式でオプションを表示するための select タグのもう 1 つの便利なトリック:
これを使用すると選択肢は表示されますが、アクションを?qū)g行することはできません。
<select name="value" >
<option value=" " disabled> Content Name </option>
<option value=" "> Content Name </option>
</select>
HTML での選択タグの例
以下に挙げる例を次に示します。
例 #1
この例では、以下に示すように、選択リスト、optgroup、および一度に複數(shù)のオプションを選択するための単純な選択タグを表示します。
コード
<!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
リストには複數(shù)のオプションがありますが、定義されたサイズごとにオプションが表示されます。
コード
<!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 タグは、リストから 1 つまたは複數(shù)のオプションを選択するための選択リストを表示します。 <選択>タグは、selected、required、disabled、required、autofill、autofocus、link、size、multiple、placeholder、optgroup などの値とともに使用できます。
以上がHTMLのタグを選択の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。