HTMLのタグを選択-htmlチュートリアル-php.cn

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

HTML の選択タグの構文

選択タグではを使用できます。タグ。

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

<select>
<option> Value  </option>
<option> Value  </option>
</select>

ログイン後にコピー

上記の構文を使用して複数のオプションを選択します。選択リストにタグを付けることも可能です。この構文は通常のの最も重要な使用法の 1 つです。タグは、リストにオプショングループを作成するためのものです。複数のオプションをグループとして作成し、グループの見出しが太字の見出しで表示されます。

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

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

ログイン後にコピー

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

<form action="" id="name">
</form>
<Select name="" form="Id_name">
<option value=" "> Content Name </option>
</select>

ログイン後にコピー

必須: 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、および一度に複数のオプションを選択するための単純な選択タグを表示します。

コード

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

ログイン後にコピー

出力:

HTMLのタグを選択

例 #2

この例では、