ywork2020.com

Title

選択メニューの項目を表す

目次 (INDEX)

option とは

ここで説明する option とは次の語句からなる HTML の要素です。
option
読み: オプション
意味: 選ぶこと、選択、選択肢

目次に戻る

option 要素の概要

この要素は、 select 要素や datalist 要素の 子要素として配置され、親要素が表すメニューの項目として機能します。

メニューで選択された項目の値は form 要素の 機能により送信されるわけですが、 送信されるデータは 親要素の name 属性の値と この option 要素の value 属性の値がペアとなり送信されます。
?name=value (?キー=値)

この要素には、開始タグと終了タグが必要です。
<option> </option>

目次に戻る

サンプルコードと実行結果

サンプルコード: HTML (属性なし)
<body>
	<form>
		<select name="course">
			<option> コースを選択してください。 </option>
			<option> HTML </option>
			<option> CSS </option>
			<option> JavaScript </option>
		</select>
	</form>
</body>

上記のコードは value と label の属性を付けていないパターンです。 これでも form 要素からデータ送信する場合も JavaScript を利用する場合も、 問題なく動作します。

サンプルコード: HTML (属性あり)
<body>
	<form>
		<select name="course">
			<option value="" label="コースを選択してください。"></option>
			<option value="HTML" label="HTML"></option>
			<option value="CSS" label="CSS"></option>
			<option value="JavaScript" label="JavaScript"></option>
		</select>
	</form>
</body>

上記のコードは value と label の属性を付けたパターンです。 この場合、開始タグと終了タグにテキストを内包する必要はありません。

実行結果:

目次に戻る

使用できる属性

目次に戻る

option 要素の属性についての補足

option 要素に value 属性を付けていない場合、開始タグと終了タグで内包しているテキストが value の代替値となります。 また、label 属性を付けていない場合も同じです。

目次に戻る