【HTML】option要素について

こんにちは。駆け出しエンジニアの竹前です。

ここでは、HTMLのoption要素について説明します。

HTMLについて勉強している方の参考になれば幸いです。

option要素とは

option要素は、select要素で作成するプルダウンメニューの選択肢を指定します。

option要素1つにつき、1つの選択肢を表示します。

option要素の書き方

value属性

value属性で、フォームで送信する値を指定します。

指定を省略すると、option要素の内容が送信する値となります。

<select name="sample">
	<option value="A">選択肢A</option>
	<option>選択肢B</option>
</select>

選択肢を選んで送信ボタンを押すと、<select>タグのname属性と<option>タグのvalue属性(省略した場合はoption要素内の文字列)が送信されます。

上記のコードの場合は、<select>タグのname属性で指定されている"sample"と<option>タグのvalue属性で指定されている"A"または"選択肢B"が送信されます。

label属性

label属性で、選択肢として表示される文字列を指定します。

指定を省略すると、option要素の内容が選択肢として表示されます。

<select name="sample">
	<option label="選択肢C">選択肢A</option>
	<option>選択肢B</option>
</select>

プルダウンメニュー内の「選択肢A」が「選択肢C」に変更されました。

また、value属性とlabel属性は同時に指定することができます。

その場合、option要素の内容は入れないようにします。

<select name="sample">
	<option value="A" label="選択肢A"></option>
	<option>選択肢B</option>
</select>

selected属性

selected属性を指定すると、初期値として最初から選択されている状態となります。

省略すると、一番先頭のoption要素の内容が選択された状態となります。

<select name="sample">
	<option>選択肢A</option>
	<option selected>選択肢B</option>
	<option>選択肢C</option>
</select>

プルダウンメニューの初期値として、選択肢Bが選択されるようになりました。

disabled属性

disabled属性を使用すると、選択肢は表示されますが、選択不可になります。

<select name="sample">
	<option>選択肢A</option>
	<option disabled>選択肢B</option>
	<option>選択肢C</option>
</select>

プルダウンメニュー内の選択肢Bが選択不可となりました。