option要素

option要素は、選択式メニュー（select要素）やデータリスト（datalist要素）における選択肢を表す要素。

カテゴリー どのカテゴリーにも属さない。
コンテキスト select要素の子要素として使用できる。
datalist要素の子要素として使用できる。
optgroup要素の子要素として使用できる。
コンテンツ・モデル label属性とvalue属性が存在しない場合、空。
label属性は存在するが、value属性が存在しない場合、テキストを内包できる。
label属性が存在しない場合、テキストを内包できる。
属性 グローバル属性。
disabled属性、label属性、selected属性、value属性。
ブラウザ対応

構文

<option>選択肢名</option>

要点

属性

任意属性

属性 説明
disabled属性 無効にする属性。
label属性 選択肢名を指定する属性。
selected属性 予め選択状態にしておく属性。
value属性 値を指定する属性。

サンプルコード

option要素にvalue属性なし

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

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

option要素にvalue属性あり

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

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

サンプル

option要素にvalue属性なし

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

選択肢：

option要素にvalue属性あり

HTMLソースコード
<form action="sample-option.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>
実際の表示

選択肢：