<select>の解説|クロノドライブのHTML辞典

<select>

対応ブラウザ Internet Explorer 2~ Firefox 1~ Google Chrome 1~ Safari 1~ Opera 6~
タグの分類 インライン要素 定義バージョン Strict, Transitional, Frameset
開始タグ 必須 終了タグ 必須
用例
<form action="samplel.cgi" method="post">
  <p>性別<br>
    <select name="sex">
      <option value="man">男性</option>
      <option value="woman">女性</option>
    </select>
  </p>
</form>

属性

name 概要 メニューの名前を指定します。
属性の値 文字列
size 概要 画面に一度に表示する行数を指定します。通常は1です。
属性の値 数値
multiple 概要 複数行の選択を可能にします。
属性の値 (multiple)
disabled 概要 このメニューを無効化し、入力できない状態にします。
属性の値 (disabled)

<select>とは

「SELECT」とは、<form>で作成したフォームの中でメニュー(セレクトボックス)を作成するためのタグです。

フォームの部品としてだけではなく、ユーザーインターフェースとしても使用することができますが、Netscape Navigator4以前のブラウザでは<form>~</form>内に記述しないと無視されます。

初期値ではプルダウン型のメニューが作成されますが、<size>属性により選択肢の表示行数を指定することが可能です。
また、メニューの選択肢は<option>を用いて作成します。
入力された情報はデータとしてサーバに送信されます。

サンプルデモ

size="値":画面に一度に表示する行数を指定します。

		<form action="samplel.cgi" method="post">
			<p>select size属性"1"<br>
				<select size="1" name="sample">
					<option value="sample">サンプル1</option>
					<option value="sample">サンプル2</option>
					<option value="sample">サンプル3</option>
					<option value="sample">サンプル4</option>
					<option value="sample">サンプル5</option>
				</select>
			</p>
		</form>
	

select size属性"1"

		<form action="samplel.cgi" method="post">
			<p>select size属性"5"<br>
				<select size="5" name="sample">
					<option value="sample">サンプル1</option>
					<option value="sample">サンプル2</option>
					<option value="sample">サンプル3</option>
					<option value="sample">サンプル4</option>
					<option value="sample">サンプル5</option>
				</select>
			</p>
		</form>
	

select size属性"5"

multiple:複数行の選択を可能にします。

		<form action="samplel.cgi" method="post">
			<p>multiple属性<br>
				<select multiple name="sample">
					<option value="sample">サンプル1</option>
					<option value="sample">サンプル2</option>
					<option value="sample">サンプル3</option>
					<option value="sample">サンプル4</option>
					<option value="sample">サンプル5</option>
				</select>
			</p>
		</form>
	

multiple属性

disabled:メニューを無効化し、入力できない状態にする。

		<form action="samplel.cgi" method="post">
			<p>disabled属性<br>
				<select disabled name="sample">
					<option value="sample">サンプル1</option>
					<option value="sample">サンプル2</option>
					<option value="sample">サンプル3</option>
					<option value="sample">サンプル4</option>
					<option value="sample">サンプル5</option>
				</select>
			</p>
		</form>
	

disabled属性