option要素

option要素はselect要素やdatalist要素の項目をマークアップするための要素です。

option要素はselect要素とdatalist要素、optgroup要素の子要素として記述することができます。

select要素内で利用する場合はlabel属性が指定されている場合は空でlabel属性がない場合はテキストを内側に記述します。

<select>
	<option label="ビール"></option>
	<option label="ワイン"></option>
	<option label="日本酒"></option>
</select>

<select>
	<option>ビール</option>
	<option>ワイン</option>
	<option>日本酒</option>
</select>

datalist要素内で利用する場合はvalue属性が指定されている場合は空でvalue属性がない場合はテキストを内側に記述します。

<input name="sex" list="sexes">
<datalist id="sexes">
	<option value="Female"></option>
	<option value="Male"></option>
</datalist>

<input name="sex" list="sexes">
<datalist id="sexes">
	<option>Female</option>
	<option>Male</option>
</datalist>

datalist要素に対応していないブラウザを考慮してvalue属性内に記述するほうがよいでしょう。(テキストとして記述した場合は非対応ブラウザで表示されるため)

また、select要素内ではvalue属性でフォームの値を指定することができます。

<select>
	<option value="ビール">ビール</option>
	<option value="ワイン">ワイン</option>
	<option value="日本酒">日本酒</option>
</select>

selected属性でselect要素の初期値を指定することができます。

<select>
	<option>ビール</option>
	<option selected>ワイン</option>
	<option>日本酒</option>
</select>

disabled属性で選択できないoption要素を指定することができます。

<select>
	<option>ビール</option>
	<option>ワイン</option>
	<option disabled>日本酒</option>
</select>

登録日 : 2015年01月17日最終更新日 : 2015年1月17日

HTMLリファレンス