select要素

select要素は、選択式メニューを表す要素。

カテゴリー フロー・コンテンツ、フレージング・コンテンツ、インタラクティブ・コンテンツ、パルパブル・コンテンツ、フォーム関連要素、ラベル付け可能フォーム関連要素、送信可能フォーム関連要素、リセット可能フォーム関連要素、form.elementsとfieldset.elementsのAPIのリストに含まれるフォーム関連要素。
コンテキスト フレージング・コンテンツを内包できる要素内で使用できる。
コンテンツ・モデル ０個以上のoption要素。
属性 グローバル属性。
autofocus属性、disabled属性、form属性、multiple属性、name属性、required属性、size属性。
ブラウザ対応

構文

<select></select>

要点

  • select要素は、選択式メニューを表す要素である。
  • select要素内に、選択肢を表すoption要素を配置する。

属性

任意属性

属性 説明
autofocus属性 オートフォーカスさせる属性。
disabled属性 無効にする属性。
form属性 所属するform要素を指定する属性。
multiple属性 複数の値を入力できるようにする属性。
name属性 名前を指定する属性。
required属性 入力を必須にする属性。
size属性 同時に表示する選択肢の数を指定する属性。

サンプルコード

select要素内のoption要素にvalue属性なし

<select name="sampleName">
	<option>選択肢Ａ</option>
	<option>選択肢Ｂ</option>
	<option>選択肢Ｃ</option>
</select>

option要素にvalue属性を指定しない場合、option要素で括ったテキストが送信データに含める値になる。

select要素内のoption要素にvalue属性あり

<select name="sampleName">
	<option value="値Ａ">選択肢Ａ</option>
	<option value="値Ｂ">選択肢Ｂ</option>
	<option value="値Ｃ">選択肢Ｃ</option>
</select>

option要素にvalue属性を指定した場合、value属性値が送信データに含める値になる。

サンプル

select要素内のoption要素にvalue属性なし

HTMLソースコード
<form action="sample-select.php" method="post" target="_blank">
	<p>
		選択肢： 
		<select name="sampleName">
			<option>選択肢Ａ</option>
			<option>選択肢Ｂ</option>
			<option>選択肢Ｃ</option>
		</select>
	</p>
	<p>
		<button type="submit">送信</button>
	</p>
</form>
実際の表示

選択肢：

select要素内のoption要素にvalue属性あり

HTMLソースコード
<form action="sample-select.php" method="post" target="_blank">
	<p>
		選択肢： 
		<select name="sampleName">
			<option value="値Ａ">選択肢Ａ</option>
			<option value="値Ｂ">選択肢Ｂ</option>
			<option value="値Ｃ">選択肢Ｃ</option>
		</select>
	</p>
	<p>
		<button type="submit">送信</button>
	</p>
</form>
実際の表示

選択肢：