selectタグ

タグ select は、HTML フォームで使用するためのドロップダウンリストを作成します。

リストの個々の項目は、タグ option 内に記述する必要があります。

属性

属性 説明
multiple この属性を指定すると、マルチセレクト(複数選択可能なドロップダウンリスト)が作成されます。 Ctrl キーを押しながら、またはマウスで範囲選択することで複数の項目を選択できます。
任意の属性です。
name ドロップダウンリストの名前です。PHPで入力フィールドのデータを取得するために必要です。 フォームを正しく動作させるためには、入力フィールドの名前は(1つのフォーム内で)互いに重複してはいけません。 重複している場合、PHPにはHTMLコードで下位にある入力フィールドのデータが送信されます。

例

ドロップダウンリストの動作を見てみましょう:

html<select>
  <option>City1</option>
  <option>City2</option>
  <option>City3</option>
  <option>City4</option>
</select>

Результат:

例

CSSプロパティ width で明示的に指定されていない場合、ドロップダウンリストの幅を最大の要素の幅に合わせてみましょう:

html<select>
  <option>Big City1</option>
  <option>City2</option>
  <option>City3</option>
  <option>City4</option>
</select>

Результат:

例 . デフォルト選択

次に、デフォルトで都市を選択するようにしてみましょう。 属性 selected を使用して行います:

html<select>
  <option>Big City1</option>
  <option selected>City2</option>
  <option>City3</option>
  <option>City4</option>
</select>

Результат:

例 . マルチセレクト

属性 multiple を使用して、通常のセレクトをマルチセレクトに変えてみましょう:

html<select multiple name="city[]">
  <option>City1</option>
  <option>City2</option>
  <option>City3</option>
  <option>City4</option>
</select>

Результат:

属性 name で指定されたセレクト名の末尾に角括弧が必要なことに注意してください。これはPHPで選択された全ての値が送信されるようにするためです(そうしないと、最後の1つの値のみが送信されます)。

例 . マルチセレクトでの複数のデフォルト値

マルチセレクトで、デフォルトとして複数の値を選択するようにしてみましょう:

html<select multiple name="city[]">
  <option>City1</option>
  <option selected>City2</option>
  <option>City3</option>
  <option selected>City4</option>
</select>

Результат:

関連項目

  • デフォルトで選択されるリスト項目を指定する属性 selected
  • リスト項目をグループ化するタグ optgroup
  • ドロップダウンリストを作成するタグ datalist