HTMLドロップダウンボックスの設定方法

HTML (ハイパーテキスト マークアップ言語) は一般的に使用される Web 開発言語であり、多くの場合、Web ページにドロップダウン ボックスを設定する必要があります。ドロップダウン ボックスは、一般的に使用される対話型コントロールであり、通常はユーザーが複数のオプションから 1 つを選択できるようにするために使用されます。 HTML でのドロップダウン ボックスの設定は非常に簡単ですので、この記事では HTML ドロップダウン ボックスの設定方法を紹介します。

HTML ドロップダウン ボックスの設定方法

HTML ドロップダウン ボックスは タグを使用して作成され、その構文は次のとおりです:

<select>
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
……
</select>

そのうち、

タグは各ドロップダウン ボックス オプションを表し、その value 属性はバックグラウンドでフォーム データを処理するときにオプションの値を識別するために使用され、 ラベルはそのオプションの値を囲むために使用されます。すべてのオプション。

次に、単純なドロップダウン ボックスの例を示します。

<select>
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
</select>

このコードは、3 つのオプションを含むドロップダウン ボックスを生成します。

ドロップダウン ボックスの属性

属性を追加すると、オプションの選択、ドロップダウン ボックスのサイズの設定など、ドロップダウン ボックスのさまざまな属性を設定できます。 、など。

一般的に使用される属性の一部を次に示します。

1. selected 属性

<option selected value="选项1">选项1</option>

selected 属性は、ドロップのデフォルト オプションを設定するために使用できます。属性が設定されていない場合は、デフォルトのオプションが最初のオプションになります。

2. multiple 属性

<select multiple>
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
</select>

multiple 属性を使用すると、ドロップダウン ボックスで複数の選択をサポートできるようになります。複数のオプションを選択したら、Ctrl キーを押しながらオプションをクリックして選択を解除します。

3. サイズ属性

<select size="5">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
</select>

サイズ属性では、ドロップダウン ボックスに表示できるオプションの数を設定できます。オプションの数が指定された数を超える場合、スクロール バーが表示され、追加のオプションが表示されます。

4. disabled 属性

<select disabled>
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
</select>

disabled 属性により、ドロップダウン ボックスが使用できなくなり、ユーザーが選択できなくなります。

5. name 属性

<select name="mySelect">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
</select>

name 属性は、ドロップダウン ボックスの名前を指定するために使用されます。この属性は通常、フォームの送信またはドロップダウン ボックスへのアクセスに使用されます。 JavaScriptのダウンボックス。

6. onchange 属性

<select onchange="myFunction()">
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
</select>

onchange 属性は、ドロップダウン ボックスのオプションが変更された後の処理関数を設定するために使用できます。

以上はHTMLドロップダウンボックスの設定方法ですが、読者の皆様にはぜひマスターしていただければと思います。

以上がHTMLドロップダウンボックスの設定方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。