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

HTML ドロップダウン リスト ボックスは、Web ページでよく使用される対話型要素の 1 つであり、ユーザーはこれを使用して 1 つ以上の事前定義されたオプションを選択できます。この記事では、ドロップダウン リスト ボックスの作成、オプションの追加、デフォルト オプションの設定など、HTML ドロップダウン リスト ボックスの設定方法を紹介します。

1. ドロップダウン リスト ボックスを作成する

HTML ドロップダウン リスト ボックスを使用する最初のステップは、以下に示すように タグを作成することです。

<select name="fruit">
</select>

このコードでは、「fruit」という名前のドロップダウン リスト ボックスが作成されますが、そこにはまだオプションがありません。

2. オプションの追加

次に、 タグにオプションを追加する必要があります。以下に示すように、 タグを使用して各オプションを定義できます:

<select name="fruit">
  <option value="apple">苹果</option>
  <option value="banana">香蕉</option>
  <option value="orange">橙子</option>
</select>

各 タグには、表示テキストと値の 2 つの部分が含まれます。表示テキストはドロップダウン リスト ボックスに表示されるテキストを指し、値はオプションの選択後にサーバーに渡される値を指します。

3. デフォルト オプションの設定

デフォルトでは、ドロップダウン リスト ボックスの最初のオプションが選択されます。他のオプションをデフォルトのオプションとして設定したい場合は、以下に示すように、 タグで selected 属性を使用できます:

<select name="fruit">
  <option value="apple">苹果</option>
  <option value="banana" selected>香蕉</option>
  <option value="orange">橙子</option>
</select>

この例では、「Banana」オプションがデフォルトのオプション。

4. 複数の選択を設定する

ユーザーに複数のオプションを選択してもらいたい場合は、以下に示すように タグで multiple 属性を使用できます:

<select name="fruit" multiple>
  <option value="apple">苹果</option>
  <option value="banana" selected>香蕉</option>
  <option value="orange">橙子</option>
</select>

ユーザーが「Ctrl」キーを押しながらオプションをクリックすると、複数のオプションを選択できます。サーバーは複数のオプションの値を受け取ることができます。

5. フォーム送信の設定

ユーザーが 1 つ以上のオプションを選択した場合、これらのオプションの値をサーバーに送信する必要があります。これを行うには、以下に示すように、 タグの name 属性を使用して、ドロップダウン リスト ボックスをフォーム内の他の要素に関連付ける必要があります。フォーム内の要素は表示されませんが、より複雑な機能を実現するために、同様の方法でフォームに要素を追加できます。

一般に、HTML ドロップダウン リスト ボックスは、Web ページでよく使用される対話型要素の 1 つです。作成、オプションの追加、デフォルト オプションの設定、複数選択の設定、およびフォーム送信の設定方法を理解した後、ユーザーが便利に選択できるように、ニーズに応じてドロップダウン リスト ボックスをカスタマイズできます。

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