<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行目の選択肢を無効化した例
※IEでは対応していないようです。
<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>
表示例
※サンプルのため送信できません。
- サイト内検索
