option - 選択肢

select要素の選択肢、datalistの候補リストの選択肢として表示されます。

option要素のブラウザ別サポート状況

- ie6 ie7 ie8 ie9 firefox4 chorme safari5 opera10
option

option要素のHTML4からHTML5への変更点

HTML5からは、新たにdatalist要素の選択肢としても利用できるようになりました。

コンテンツ属性

グローバル属性 すべての要素で共通に使える属性。HTML5で新たに定義された属性もあります。
disabled 無効化
label ラベルを付けます
指定されなければoption要素内のテキスト自体がラベルになります
selected 選択状態化
value 要素の値

「select要素」のサンプル

HTMLコード

<form action="request.php" method="get">
<select name="example">
<option value="html5">HTML5</option>
<option value="html4">HTML4.01</option>
<option value="css3">CSS</option>
<option value="javascript">javascript</option>
<option value="jQuery">jQuery</option>
<option value="YUI">YUI</option>
<option value="FLASH3">FLASH action script3</option>
<option value="FLASH2">FLASH action script2</option>
<option value="PHP">PHP</option>
<option value="JAVA">JAVA</option>
<option value="Ruby">Ruby</option>
<option value="Perl">Perl</option>
</select>
<input type="submit" value="送信">
</form>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「select要素」のサンプルプレビューを確認

「datalist要素」のサンプル

HTMLコード

<form action="request.php" method="get">
<input type="search" name="example" list="web" autocomplete="on">
<datalist id="web">
<option value="html5">HTML5</option>
<option value="html4">HTML4.01</option>
<option value="css3">CSS</option>
<option value="javascript">javascript</option>
<option value="jQuery">jQuery</option>
<option value="YUI">YUI</option>
<option value="FLASH3">FLASH action script3</option>
<option value="FLASH2">FLASH action script2</option>
<option value="PHP">PHP</option>
<option value="JAVA">JAVA</option>
<option value="Ruby">Ruby</option>
<option value="Perl">Perl</option>
</datalist>
<input type="submit" value="送信">
<p>この例の場合、「H」や「F」などoption要素に指定されている値を入力すると入力候補が表示されます。(サポートしているブラウザのみ)</p>
<style>datalist{display:none}/* サポートしていないブラウザで表示されるのを防ぐため */</style>
</form>

プレビュー

対応していないブラウザでは正しくプレビューされません。

別ウィンドウで「datalist要素」のサンプルプレビューを確認

原文(英語):(http://www.w3.org/TR/2009/WD-html5-20090423/forms.html#the-option-element)