HTMLのタグを選択

HTML の選択タグを使用すると、ドロップダウン メニューや複数選択メニューなどのオプションのリストからの選択機能が有効になります。 Webページの作成や実装に使用するHTMLコードのフォーム内で使用できるタグです。構文は「」のようになります。値 値 ….。リスト内の各項目はオプション タグで囲まれ、ユーザー選択機能が可能になります。 opt グループや複数選択などの他の選択方法を容易にするために、タグは 内で使用できます。タグを選択し、 の代わりに使用できます。それぞれタグを付けます。

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>

の最も重要な使用法の 1 つです。タグは、リストにオプション グループを作成するためのものです。複数のオプションをグループとして作成し、グループの見出しが太字の見出しで表示されます。

この構文は次のとおりです:

<select>
<optgroup label>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<optgroup>
</optgroup>
</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>

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 つの特定のオプションに焦点を当てることができます。 1 つのページに使用できるオートフォーカスは 1 つだけです。

<select autofocus>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
<option value=" "> Content Name </option>
</select>

link: 選択タグは、次の構文で定義されている指定されたオプションを通じてフォーム リンクを開くために使用されます:

Content Name

必須: 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 タグのもう 1 つの便利なトリック:

これを使用すると選択肢は表示されますが、アクションを実行することはできません。

<select name="value">
<option value=" " disabled> Content Name </option>
<option value=" "> Content Name </option>
</select>

HTML での選択タグの例

以下に挙げる例を次に示します。

例 #1

この例では、以下に示すように、選択リスト、optgroup、および一度に複数のオプションを選択するための単純な選択タグを表示します。

コード

<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>


<div class="div-container">
<div class="block">
<h4 id="Simple-Select-tag">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 id="Optgroup-Select-tag">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 id="Multiple-Selection-in-Select-tag">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>

出力:

例 #2

この例では、 を使用してリンクから開く方法を定義します。タグ

コード

<title>select Tag form link</title>

Colspan tag Font Tag

出力: Colspan タグ値を選択し、送信ボタンで選択すると、リストにリンクされたフォームが開きます。

例 #3

リストには複数のオプションがありますが、定義されたサイズごとにオプションが表示されます。

コード

<title>select Tag form link</title>



Aurangabad
Beed
Chennai
Delhi
Egatpuri
Firozabad
Fatimpur
Goa
Harihareshwar
Indonesia
Japan
Kolkata
Latur
Mumbai
Nagpur
Oty
Pune
Qatar
Raipur
Sholapur
Tamil Nadu
Uttarakhand

出力:

結論

HTML の select タグは、リストから 1 つまたは複数のオプションを選択するための選択リストを表示します。 タグは、selected、required、disabled、required、autofill、autofocus、link、size、multiple、placeholder、optgroup などの値とともに使用できます。

以上がHTMLのタグを選択の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。