<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>
- 表示例
-
- サンプルのため送信できません。
<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>
- 表示例
-
- サンプルのため送信できません。
<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キーを押しながらクリック。
- サンプルのため送信できません。
<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>
- 表示例
-
- サンプルのため送信できません。
- 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>
- 表示例
-
- サンプルのため送信できません。
この属性に対応しているブラウザは少ないようです。（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>
- 表示例
-
- サンプルのため送信できません。