HTML ドロップダウンリスト

はじめに

HTML の <select> 要素は、ユーザーに与えられたリストから 1 つ以上のオプションを選択できるドロップダウンリストを作成するために使用されます。この実験では、HTML の <select> タグを使用して、ユーザーが選択できる項目のリストを作成する方法を学びます。

注：index.html でコーディングを練習し、Visual Studio Code で HTML を記述する方法を学ぶことができます。画面右下の「Go Live」をクリックして、ポート 8080 でウェブサービスを実行します。その後、Web 8080 タブを更新して、Web ページをプレビューできます。

セレクト要素の作成

<select> 要素を作成するには、開始タグと終了タグ付きの HTML の <select> タグを使用します。以下は、簡単な <select> 要素を作成する方法の例です。

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

上記のコードは、4 つのオプション（Volvo、Saab、Opel、Audi）を持つ簡単な <select> 要素を作成します。

セレクト要素に属性を追加する

<select> 要素に属性を追加することで、ユーザーにとってより対話性の高い要素にすることができます。以下は、HTML の <select> 要素の重要な属性のいくつかです。

A: size 属性

size 属性は、一度に表示するオプションの数を指定します。以下は例です。

<select size="3">
  <!-- デフォルトで 3 つのオプションが表示されます -->
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

B: name 属性

name 属性は、<select> 要素に名前を割り当てます。以下は例です。

<select name="city">
  <option value="Amsterdam">Amsterdam</option>
  <option value="Berlin">Berlin</option>
  <option value="Paris">Paris</option>
  <option value="Barcelona">Barcelona</option>
  <option value="Madrid">Madrid</option>
</select>

C: multiple 属性

multiple 属性は、ユーザーに同時に 1 つ以上のオプションを選択できるようにします。以下は例です。

<select multiple>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

オプションの定義

<option> タグを使用することで、<select> 要素に任意の数のオプションを追加できます。以下は例です。

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

ご覧の通り、4 つのオプションを定義しており、各オプションには value 属性があります。value 属性は、各オプションを一意の値と関連付けるために使用できます。

グループ化されたオプションの使用

<optgroup> タグの下でオプションをグループ化することができます。これにより、<select> 要素がより整理され、読みやすくなります。グループ化されたオプションを使用する方法は以下の通りです。

<select>
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>

デフォルト値の作成

ページが読み込まれたときに表示される初期値を指定することができます。初期値を設定する方法は以下の通りです。

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option selected value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

この例では、「Opel」オプションが初期値として選択されます。

まとめ

この実験では、HTML の <select> タグを使用してドロップダウンリストを作成する方法、<select> タグと共に使用できるさまざまな属性、オプションを定義する方法、グループ化されたオプションの使用方法、および初期値の作成方法を学びました。これらのスキルを使えば、ユーザーがウェブサイトと簡単に対話できるように、より高度な <select> 要素を作成できるようになるはずです。