option 要素

ウェブフォームにおいて HTML <option> 要素は、<select> 要素、<optgroup> 要素、<datalist> 要素内で項目を定義します。したがって、<option> は HTML ドキュメントでポップアップメニューのメニュー項目や、その他の項目の一覧を表すことができます。

属性

この要素は グローバル属性 を持ちます。

disabled

この論理属性を設定すると、選択肢が選択不能になります。多くのブラウザーはそのようなコントロールをグレーアウトで表示し、マウスクリックやフォーカスなど、いかなるイベントも受け付けなくなります。この属性を設定していなくても、祖先が disable 状態の <optgroup> 要素である場合は無効化されます。

label

この属性は、選択肢の意味を示すラベルテキストです。label 属性を定義していない場合は、要素のテキストコンテンツが要素の値になります。

selected

この論理属性を設定すると、その選択肢が初期状態で選択されます。<option> 要素が multiple を設定していない <select> 要素の子孫である場合、<select> 要素内で 1 個の <option> だけが selected 属性を持てます。

value

この属性の内容物は、フォームで送信する値を表します。値を送信するには、選択肢を選択しなければなりません。この属性を省略すると、option 要素のテキストコンテンツが値になります。

例

<select> 要素の例をご覧ください。

仕様

ブラウザー実装状況

[1] Gecko は、要素の内容物が空である場合に label 属性の値を option のテキストとして表示しません。バグ 40545 をご覧ください。

[2] 歴史的に、Firefox はキーボードやマウスのイベントが <option> 要素から親の <select> 要素に伝播することを許可してきました。これは Chrome では発生しませんが、この動作は多くのブラウザー間で一貫性がありません。ウェブ互換性を高めるため (および技術的な理由で)、Firefox がマルチプロセスモードであり <select> 要素がドロップダウンリストとして表示されるときに、<select> がインラインで提供されていて multiple 属性が定義されているか size 属性が 1 より大きければ、動作は変わりません。イベントのために <option> 要素を監視するのではなく、<select> の change イベントを監視してください。詳しくは バグ 1090602 をご覧ください。

[3] Mozilla がコンテンツ用のスレッドを (Electrolysis または e10s プロジェクトで) Firefox に導入したとき、<option> 要素へのスタイル設定のサポートを一時的に削除しました。Firefox 54 より color および background-color プロパティを使用して、<option> 要素に再び前景色や背景色を設定できるようになりました。詳しくは バグ 910022 をご覧ください。Linux では、コントラストが不足するためまだ無効化していますので注意してください (進捗状況は バグ 1338283 で確認してください)。

関連情報

• 他のフォーム関連要素: <form>, <legend>, <label>, <button>, <select>, <datalist>, <optgroup>, <fieldset>, <textarea>, <keygen>, <input>, <output>, <progress>, <meter>