1. Home
  2. HTMLタグ
  3. フォームタグ
  4. セレクトボックスを作る

セレクトボックスを作る


<select></select> <option></option>


select要素で、メニュー(セレクトボックス)を作成することができます。メニューの選択肢は、select要素内に配置するoption要素で作成します。



<select name="example">
<option value="サンプル1">サンプル1</option>
<option value="サンプル2">サンプル2</option>
<option value="サンプル3">サンプル3</option>
</select>


【select要素】

<select name="example" size="3" multiple></select>

属性 説明
name="" 文字列 部品の名前を指定
size="" 行数 表示行数を指定
multiple 値は不要 複数選択を可能にする

■name="" (部品の名前を指定)

フォーム部品を識別するための名前を指定します。

この属性の値は、option要素の値とセットで送信されることになります。

■size="" (表示行数を指定)

メニューの表示行数を指定します。

この属性の値に 1 を指定するとプルダウン形式のメニューになり、2 以上を指定するとリスト形式のメニューになります。(この属性を指定しない場合は、1 を指定した時と同じになります)

■multiple (複数選択を可能にする)

この属性を指定すると、メニューの中から複数を選択できるようになります。

※Windowsの場合は、「Shift」または「Ctrl」キーを押しながらクリックすると、複数を選択することができます。


【option要素】

<option value="サンプル" label="サンプル" selected>サンプル</option>

属性 説明
value="" 文字列 送信される文字列を指定
label="" テキスト 選択肢として表示されるテキストを指定
selected 値は不要 選択された状態を指定

■value="" (送信される文字列を指定)

この属性の値は、その選択肢が選択されている時に送信されることになります。

この属性を省略した場合は、option要素内のテキストが送信されることになります。

■label="" (選択肢として表示されるテキストを指定)

この属性の値は、メニューの選択肢として表示されます。しかし、この属性に対応しているブラウザは少ないようです。

この属性を省略した場合、またはこの属性に対応していないブラウザでは、option要素内のテキストがメニューの選択肢として表示されることになります。

■selected (選択された状態を指定)

この属性を指定した選択肢は、最初から選択された状態になります。

select要素multiple属性が指定されている場合は、複数の選択肢にselected属性を指定することができます。


【その他の属性】

以下の属性で、部品の無効化を指定することができます。(主に、JavaScript等と組み合わせて使用することになります)

属性 説明
disabled 値は不要 部品を無効化する

上記の属性は、select要素option要素のどちらにも指定することができます。しかし、option要素に対するこの属性の指定は、一部のブラウザでは対応していないようです。

■disabled (部品を無効化する)

この属性が指定された部品は、選択することができなくなります。

メモ

メニューのサイズや背景色等は、スタイルシートでアレンジすることができます。指定方法の詳細は「関連ページ」をご覧ください。


使用例

■プルダウン形式で表示した例


<form method="post" action="example.cgi">

<p>
<select name="example1">
<option value="サンプル1">選択肢のサンプル1</option>
<option value="サンプル2">選択肢のサンプル2</option>
<option value="サンプル3">選択肢のサンプル3</option>
<option value="サンプル4">選択肢のサンプル4</option>
<option value="サンプル5">選択肢のサンプル5</option>
</select>
</p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

※サンプルのため送信できません。


■3行目を選択済みにした例


<form method="post" action="example.cgi">

<p>
<select name="example2">
<option value="サンプル1">選択肢のサンプル1</option>
<option value="サンプル2">選択肢のサンプル2</option>
<option value="サンプル3" selected>選択肢のサンプル3</option>
<option value="サンプル4">選択肢のサンプル4</option>
<option value="サンプル5">選択肢のサンプル5</option>
</select>
</p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

※サンプルのため送信できません。


■リスト形式で表示した例


<form method="post" action="example.cgi">

<p>
<select name="example3" size="5">
<option value="サンプル1">選択肢のサンプル1</option>
<option value="サンプル2">選択肢のサンプル2</option>
<option value="サンプル3">選択肢のサンプル3</option>
<option value="サンプル4">選択肢のサンプル4</option>
<option value="サンプル5">選択肢のサンプル5</option>
</select>
</p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

※サンプルのため送信できません。


■10行のメニューを5行で表示した例


<form method="post" action="example.cgi">

<p>
<select name="example4" size="5">
<option value="サンプル1">選択肢のサンプル1</option>
<option value="サンプル2">選択肢のサンプル2</option>
<option value="サンプル3">選択肢のサンプル3</option>
<option value="サンプル4">選択肢のサンプル4</option>
<option value="サンプル5">選択肢のサンプル5</option>
<option value="サンプル6">選択肢のサンプル6</option>
<option value="サンプル7">選択肢のサンプル7</option>
<option value="サンプル8">選択肢のサンプル8</option>
<option value="サンプル9">選択肢のサンプル9</option>
<option value="サンプル10">選択肢のサンプル10</option>
</select>
</p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

※サンプルのため送信できません。


■複数選択を可能にした例


<form method="post" action="example.cgi">

<p>
<select name="example5" size="5" multiple>
<option value="サンプル1">選択肢のサンプル1</option>
<option value="サンプル2">選択肢のサンプル2</option>
<option value="サンプル3">選択肢のサンプル3</option>
<option value="サンプル4">選択肢のサンプル4</option>
<option value="サンプル5">選択肢のサンプル5</option>
</select>
</p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

Windowsの場合は、「Shift」または「Ctrl」キーを押しながらクリック。

※サンプルのため送信できません。


■複数選択を可能にし、2行目と4行目を選択済みにした例


<form method="post" action="example.cgi">

<p>
<select name="example6" size="5" multiple>
<option value="サンプル1">選択肢のサンプル1</option>
<option value="サンプル2" selected>選択肢のサンプル2</option>
<option value="サンプル3">選択肢のサンプル3</option>
<option value="サンプル4" selected>選択肢のサンプル4</option>
<option value="サンプル5">選択肢のサンプル5</option>
</select>
</p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

※サンプルのため送信できません。


■メニューを無効化した例


<form method="post" action="example.cgi">

<p>
<select name="example7" disabled>
<option value="サンプル1">選択肢のサンプル1</option>
<option value="サンプル2">選択肢のサンプル2</option>
<option value="サンプル3">選択肢のサンプル3</option>
<option value="サンプル4">選択肢のサンプル4</option>
<option value="サンプル5">選択肢のサンプル5</option>
</select>
</p>

<p>
<select name="example8" size="5" disabled>
<option value="サンプル1">選択肢のサンプル1</option>
<option value="サンプル2">選択肢のサンプル2</option>
<option value="サンプル3">選択肢のサンプル3</option>
<option value="サンプル4">選択肢のサンプル4</option>
<option value="サンプル5">選択肢のサンプル5</option>
</select>
</p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

※サンプルのため送信できません。


■3行目の選択肢を無効化した例

※IE7以下では対応していないようです。


<form method="post" action="example.cgi">

<p>
<select name="example9">
<option value="サンプル1">選択肢のサンプル1</option>
<option value="サンプル2">選択肢のサンプル2</option>
<option value="サンプル3" disabled>選択肢のサンプル3</option>
<option value="サンプル4">選択肢のサンプル4</option>
<option value="サンプル5">選択肢のサンプル5</option>
</select>
</p>

<p>
<select name="example10" size="5">
<option value="サンプル1">選択肢のサンプル1</option>
<option value="サンプル2">選択肢のサンプル2</option>
<option value="サンプル3" disabled>選択肢のサンプル3</option>
<option value="サンプル4">選択肢のサンプル4</option>
<option value="サンプル5">選択肢のサンプル5</option>
</select>
</p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

※サンプルのため送信できません。


■option要素にlabel属性を指定した例

この属性に対応しているブラウザは少ないようです。(IE7以上は対応しています)


<form method="post" action="example.cgi">

<p>
<select name="example11">
<option value="サンプル1" label="選択肢1">選択肢のサンプル1</option>
<option value="サンプル2" label="選択肢2">選択肢のサンプル2</option>
<option value="サンプル3" label="選択肢3">選択肢のサンプル3</option>
<option value="サンプル4" label="選択肢4">選択肢のサンプル4</option>
<option value="サンプル5" label="選択肢5">選択肢のサンプル5</option>
</select>
</p>

<p><input type="submit" value="送信する"></p>

</form>

表示例

※サンプルのため送信できません。


フォームタグ

ページの先頭へ