selectタグ
タグ select は、HTML フォームで使用するためのドロップダウンリストを作成します。
リストの個々の項目は、タグ option 内に記述する必要があります。
属性
| 属性 | 説明 |
|---|---|
multiple |
この属性を指定すると、マルチセレクト(複数選択可能なドロップダウンリスト)が作成されます。
Ctrl キーを押しながら、またはマウスで範囲選択することで複数の項目を選択できます。
任意の属性です。 |
name |
ドロップダウンリストの名前です。PHPで入力フィールドのデータを取得するために必要です。 フォームを正しく動作させるためには、入力フィールドの名前は(1つのフォーム内で)互いに重複してはいけません。 重複している場合、PHPにはHTMLコードで下位にある入力フィールドのデータが送信されます。 |
例
ドロップダウンリストの動作を見てみましょう:
<select>
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
例
CSSプロパティ width で明示的に指定されていない場合、ドロップダウンリストの幅を最大の要素の幅に合わせてみましょう:
<select>
<option>Big City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
例 . デフォルト選択
次に、デフォルトで都市を選択するようにしてみましょう。
属性 selected を使用して行います:
<select>
<option>Big City1</option>
<option selected>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
例 . マルチセレクト
属性 multiple を使用して、通常のセレクトをマルチセレクトに変えてみましょう:
<select multiple name="city[]">
<option>City1</option>
<option>City2</option>
<option>City3</option>
<option>City4</option>
</select>
:
属性 name で指定されたセレクト名の末尾に角括弧が必要なことに注意してください。これはPHPで選択された全ての値が送信されるようにするためです(そうしないと、最後の1つの値のみが送信されます)。
例 . マルチセレクトでの複数のデフォルト値
マルチセレクトで、デフォルトとして複数の値を選択するようにしてみましょう:
<select multiple name="city[]">
<option>City1</option>
<option selected>City2</option>
<option>City3</option>
<option selected>City4</option>
</select>
: